[英]Dropzone with normal form
我的問題是我必須將正常形式與dropzone.js結合起來才能進行拖放式上傳。 用戶單擊提交按鈕后,如果輸入中包含值,那么ajax請求會將數據發送到php腳本。
但是,如何通過dropzone和ajax-request合並文件? 當用戶單擊按鈕時,我將同時發送這兩個消息。 如果將文件拖到區域中,則會發送該文件。
autoProcessQueue: false
這樣一來,如果用戶在區域中拖動文件,則不會發送該文件。
所需的解決方案:用戶填寫表格,在區域中拖動文件,如果用戶單擊按鈕,則將以ajax請求發送值和文件。
該代碼的一些演示: http : //jsfiddle.net/wQP5B/
我也有同樣的問題,但我解決了。 您可以從dropzone中檢出此鏈接-> https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
他們給了您想要的東西,但是在他們給的東西中添加了一些東西,例如使整個表格不可點擊等。 下面的代碼對我來說很好
form.html
<form method="post" action="upload.php" class="dropzone" id="mydropzone" enctype='multipart/form-data'> //remember we gave an id mydropzone to the form
<label>Username:<input type="text" name="uname"/> </label>
<label>Password:<input type="text" name="pass"/> </label>
//this will the dropzone drag and drop section.
//notice we have given it an id dropzonePreview.
<div id="dropzonePreview"></div>
<input type="button" id="sbmtbtn" value="submit"/>
//we have given id sbmtbtn to the button
</form>
<script>
Dropzone.options.mydropzone = {
//url does not has to be written
//if we have wrote action in the form
//tag but i have mentioned here just for convenience sake
url: 'upload.php',
addRemoveLinks: true,
autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
autoDiscover: false,
paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file']
previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files
clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable
accept: function(file, done) {
console.log("uploaded");
done();
},
error: function(file, msg){
alert(msg);
},
init: function() {
var myDropzone = this;
//now we will submit the form when the button is clicked
$("#sbmtbtn").on('click',function(e) {
e.preventDefault();
myDropzone.processQueue(); // this will submit your form to the specified action path
// after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual
//REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that
});
} // init end
};
</script>
注意 :您不必在php文件中做任何花哨的事情。 只需編寫您通常用PHP編寫的文件來上傳文件和輸入即可。
看看這是否適合您。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.