我想通过拖放同时保存图像并单击功能。我为点击功能和拖放功能编写了脚本。点击功能正常工作,但掉线功能不起作用。我不知道哪里出错......
<div align="center">
<input type="file" name="file" id="file"/>
<div id="dock" class="dock">
Drag & Drop Photos Here</div>
</div>
下面是我的javascript函数。我调用了两个ajax function.one用于click函数,另一个用于drop函数。
$(document).ready(function() {
$("#dock").click(function(){
$("#file").click();
});
$("#file").change(function(){
var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file',files);
uploadData(fd);
});
$('#dock').on('dragenter', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#dock').on('drop', function(e){ t
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
upload(e.originalEvent.dataTransfer.files);
}
}
});
function upload(files){
var fd1 = new FormData();
for (var i = 0; i < files.length; i++) {
fd1.append('file_' + i, files[i]);
}
fd1.append('nbr_files', i);
$.ajax({ // JQuery Ajax
type: 'POST',
url: 'ajax/tuto-dd-upload-image.php',
data: fd1,
processData: false,
contentType: false,
success: function(data) {
alert(data);
$('#result').html(data);
},
});
}
function uploadData(formdata){
$.ajax({
url: 'upload.php',
type: 'post',
data: formdata,
contentType: false,
processData: false,
dataType: 'json',
success: function(response){
alert(response);
}
});
}
});