2016-08-13 15 views
0

モーダルを使用してファイルをアップロードしようとしています。ボタンをクリックするのではなく、ファイルを選択して作業します。コードの下ファイルアップロードがブートストラップモーダルから機能しない

は私のモーダルを呼び出すボタン用です:コードの下

​​

私のモーダルダイアログされています。以下は

<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(); 
      } 
     }); 

以下のコードと同じコードを使用するとうまく動作します。しかし、問題は私がアップロードしたファイルをブラウズして選択する瞬間です... "Choose File/Browse"ボタンをクリックしてアップロードボタンのクリックファイルをアップロードする必要がある場合、ファイルをブラウズして選択しようとしています...

私は 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(); 
      } 
     }); 
+0

また、コードスニペットはChromeでのみ動作し、IEでは動作しません。 –

答えて

0

あなたは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(); 
      } 
     }); 

を置くべき

ファイルタイプの入力を受け入れ

+0

こんにちは、あなたの返事をありがとう、私はそれをやったが、運がなかった... –

+0

私はボタンにIDを追加しました:

+0

そのボタンのcilckに私のコードを追加しました...私は警告を見ることができましたが、その後コードが実行されることはありませんでした。 アラート(「こんにちは」); //あなたの提案したようなコードスニペット.... });;;(#fileUploadButton) –

関連する問題