JQueryフォームデータと1つのファイルのみを含むファイルアップロード

Question

私はJQueryファイルアップロードを当社のウェブサイトで実行しようとしています。今度は、ファイルアップロードと同時にデータを提出する必要があります。また、アップロードするファイルを1つだけ許可する必要があります。最終的には、jQuery fileuploadから以前に追加したファイルをクリアして、1つのファイルと1つの要求がサーバーに送信されていることを確認します。 私のフォームのバージョンをカット。

<form enctype="multipart/form-data" id="TestCreateForm" method="post"> 
<label for="Form_staffMember">Staff Member</label> 
<input id="Form_staffMember" name="Form.staffMember" type="text" /> 

<input id="FileUpload" name="FileUpload" type="file" value="" /> 

<!-- The container for the uploaded files --> 
<div id="files" class="files"></div> 
<!-- The global progress bar --> 
<div id="progress" class="progress"> 
    <div class="progress-bar progress-bar-success"></div> 
</div> 

<div class="form-group"> 
    <div> 
     <button class="btn btn-default">Upload</button> 
    </div> 
</div></form> 

現在のJavascript

<script> 
    $(function() { 
     var sendData = true; 
     $('#FileUpload').fileupload({ 
      dataType: 'json', 
      autoUpload: false, 
      add: function (e, data) { 
       console.log('add'); 
       var clearOldData = true; 
       $('#TestCreateForm button').on('click', function() { 
        //alert('TestCreateForm button click'); 
        //data.abort(); 
        if (sendData) { 
         var serialArray = $('#TestCreateForm').serializeArray(); 
         data.formData = serialArray; //$('#TestCreateForm').serializeArray(); 
         sendData = false; 
        } 
        data.submit(); 
        clearOldData = false; 
       }); 
       if (clearOldData) { 
        $("#files").empty(); 
       } 
       $.each(data.files, function (index, file) { 
        var filename = file.name; 
        $('<p/>').text(filename).appendTo('#files'); 
       }); 
      }, 
      done: function (e, data) { 
       sendData = true; 
       console.log('done'); 
       /*$.each(data.files, function (index, file) { 
        $('<p/>').text(file.name).appendTo('#files'); 
       });*/ 
      }, 
      progressall: function (e, data) { 
       console.log('Progressall'); 
       var progress = parseInt(data.loaded/data.total * 100, 10); 
       $('#progress .progress-bar').css(
        'width', 
        progress + '%' 
       ); 
      } 
     }).prop('disabled', !$.support.fileInput) 
    .parent().addClass($.support.fileInput ? undefined : 'disabled'); 
    }); 
</script> 

Answer 1

私はファイルのアップロードが完了したら、あなたがhere を見ることができるように、私は私のファイルアップロードフィールドの横のゴミ箱ボタンを持っていますが、ダウンロードのテンプレートでそれを試すことができますファイルを識別するIDをアプリケーションに送信するので、必要に応じてajax呼び出しから削除できます。

1つのファイルだけに制限することも簡単です：ファイルフィールドにファイルIDがあるかどうかを調べるためにaddイベントを使用します（このフィールドは入力されます）。そうでない場合は、ファイルのアップロードを開始します。

は、API andこのためthisをチェックし、コールバックのために、これはあなたを助けることができる

希望を追加してください。

大丈夫