부트 스트랩 모달에서 파일 업로드가 작동하지 않습니다.

모달을 사용하여 파일을 업로드하려고합니다. 버튼 선택이 아니라 파일 선택에 대한 작업. 코드 아래부트 스트랩 모달에서 파일 업로드가 작동하지 않습니다.

내 모달을 호출하는 버튼입니다 :

코드 아래

<button type="button" class="btn btn-primary btn-xs" 
     id="browseAndLoad" name="browseAndLoad"> 
    File Upload 
</button>

내 모달 대화입니다 :

: 아래

<div class="modal fade" id="completeBrowse" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4><span class="glyphicon glyphicon-lock"></span> Upload File</h4> 
      </div> 
      <div class="modal-body" id="completeBrowseBody"> 
       Choose and Upload 
       <input type="file" name="datafile" class="form-control" /><br/> 
       <div id="upload" style="display:none;">Uploading..</div> 
       <input type="button" class="btn btn-default btn-xs" 
         id="uploadingFileButton" name="uploadingFileButton" 
         value="Upload"/> 
      </div> 
      <div class="modal-footer"> 
       <em> Click on <strong>Choose File/ Browse</strong> to select and upload a file </em> 
      </div> 
     </div> 
    </div> 
</div>

내가 구현하기 위해 노력하고 파일 업로드 부분입니다

$('input[name="uploadingFileButton"]').ajaxfileupload({ 
      'params': '${formRoot.Number}:${headerModel.User}', 
      'action': path, 
    //  'orderID', '${formRoot.Number}', 
      'onComplete': function(response) { 
       $('#upload').hide(); 
       if(response.status) 
        alert("File SAVED!!"); 
      }, 
      'onStart': function() { 
       $('#upload').show(); 
      } 
     });

아래 코드와 동일한 코드를 사용하면 정상적으로 작동합니다. 하지만 문제는 제가 파일을 찾아보고 선택할 때입니다 ... "파일/찾아보기 선택"버튼을 클릭하고 업로드 버튼 클릭 파일을 업로드 할 때 파일을 찾아보고 선택하려고합니다 ...

내가 ajaxfileupload 생각

$('input[type="file"]').ajaxfileupload({ 
      'params': '${formRoot.Number}:${headerModel.User}', 
      'action': path, 
    //  'orderID', '${formRoot.Number}', 
      'onComplete': function(response) { 
       $('#upload').hide(); 
       if(response.status) 
        alert("File SAVED!!"); 
      }, 
      'onStart': function() { 
       $('#upload').show(); 
      } 
     });

출처

2016-08-13 Nancy Sam

또한 코드 스 니펫은 Chrome에서만 작동하며 IE에서는 작동하지 않습니다. –

는 uploadingFileButton 버튼의 클릭 핸들러에 코드

$('input[type="file"]').ajaxfileupload({ 
      'params': '${formRoot.Number}:${headerModel.User}', 
      'action': path, 
    //  'orderID', '${formRoot.Number}', 
      'onComplete': function(response) { 
       $('#upload').hide(); 
       if(response.status) 
        alert("File SAVED!!"); 
      }, 
      'onStart': function() { 
       $('#upload').show(); 
      } 
     });

을 넣어해야

파일 형식의 입력을 수용

출처

2016-08-13 05:57:47 saiyan

안녕하세요, 답장을 보내 주셔서 감사합니다.하지만 행운은 없었습니다 ... –

버튼에 ID를 추가했습니다. –

그리고 그 버튼의 cilck에 내 코드를 추가했습니다 ... 나는 경고를 볼 수 있지만 그 후에 실행되는 코드는 볼 수 없습니다. # ("# fileUploadButton"). (function() { alert ('Hello there'); // 제안한 내 코드 스 니펫 .... }); –

부트 스트랩 모달에서 파일 업로드가 작동하지 않습니다.

답변

관련 문제