我想知道是否有任何方法可以让Dropzone.js (http://dropzonejs.com)使用标准的浏览器帖子而不是AJAX。
是否可以在提交前将输入type=file注入到DOM中?
发布于 2014-05-20 21:13:24
所以,如果我没理解错的话,你想在提交激活了dropzone的表单之前添加一些数据(input=file),对吧?
如果是这样,我不得不做几乎同样的事情,我通过监听事件得到了它。如果你只上传一个文件,你应该监听“发送”事件,但如果你想开启多个上传,你应该监听"sendingmultiple“。下面是我用来实现这一点的一段代码:
Dropzone.options.myAwesomeForm = {
acceptedFiles: "image/*",
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
init: function() {
var myDropzone = this;
[..some code..]
this.on("sendingmultiple", function(files, xhr, formData) {
var attaches = $("input[type=file]").filter(function (){
return this.files.length > 0;
});
var numAttaches = attaches.length;
if( numAttaches > 0 ) {
for(var i = 0; i < numAttaches; i++){
formData.append(attaches[i].name, attaches[i].files[0]);
$(attaches[i]).remove();
}
}
});
[..some more code..]
}
}
就是这样。我希望它对您有所帮助:)
PS:如果有任何语法错误,我很抱歉,但英语不是我的母语
发布于 2016-12-15 18:18:56
这是我在过去的项目中使用的,
function makeDroppable(element, callback) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', true);
input.style.display = 'none';
input.addEventListener('change', triggerCallback);
element.appendChild(input);
element.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.add('dragover');
});
element.addEventListener('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove('dragover');
});
element.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove('dragover');
triggerCallback(e);
});
element.addEventListener('click', function() {
input.value = null;
input.click();
});
function triggerCallback(e) {
var files;
if(e.dataTransfer) {
files = e.dataTransfer.files;
} else if(e.target) {
files = e.target.files;
}
callback.call(null, files);
}
}
https://stackoverflow.com/questions/23716048
复制相似问题