1
複数のファイルをアップロードしようとして問題があります。私は2つのメソッドをajax経由でページに送ります。 1つはドロップゾーン、もう1つはXMLHttpRequest
です。ボタンをクリックして送信するたびに、dropzoneである最初のメソッドに続いて私の要求が複製され、私のXMLHttpRequest
は無視されます。だから、私はそれをformDataにバインドして送信する方法を見つけようとしています。JQuery:dropzone.jsを使用してformDataに複数のファイルを配置し、ajax経由で送信する方法
マイフォーム
<form style="border:3px dashed #D9EDF7;" action="UploadImage"
class="dropzone dz-clickable"
id="my-awesome-dropzone" enctype="multipart/form-data">
<div class="dz-message">Drop files here or click to upload.
<br> <span class="note">(Selected files are not
automatically uploaded.)</span>
</div>
<div class="fallback">
<input name="file" id="filez" type="file" multiple/>
</div>
</form>
私のJs
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('#my-awesome-dropzone', {
url : '../ajax/ajax_add/ajax_addNEWContestant.php?
multipleImage=multiple_image&event_id='+event_id,
autoProcessQueue : false
});
$(document).on('click','#addnewContestant', function(e){
myDropzone.processQueue();
var formdata = new FormData();
formdata.append('file_addnew', file_addnew.files[0]);
//If there is a way, I just want to bind all the files from dropzone into formData
var data = new FormData();
for(var b=0; b<imageContainer.length; b++){
formdata.append('All_files_from_dropzone[], input_file.files[b]);
}
var param = "?event_id="+encodeURIComponent(event_id)+
"&contestant_name="+encodeURIComponent(contestant_name)+
"&contestant_lastName="+encodeURIComponent(contestant_lastName)+
"&conAge="+encodeURIComponent(conAge)+
"&hAddress="+encodeURIComponent(hAddress)+
"&email_add="+encodeURIComponent(email_add)+
"&conContactNum="+encodeURIComponent(conContactNum)+
"&conDesc="+encodeURIComponent(conDesc)+
"&conId_hidden="+encodeURIComponent(conId_hidden)+
"&hidden_gender="+encodeURIComponent(hidden_gender)+
"&random_gender="+encodeURIComponent(random_gender)+
"&multipleImage="+encodeURIComponent(multipleImage);
beforeSend();
xhr = new XMLHttpRequest();
var url = '../ajax/ajax_add/ajax_addNEWContestant.php';
xhr.open('post', url+param, true);
});