Javascript 针对多个目标的jQuery dnd文件上载

我正在使用进行一个项目。dnd上传器的所有示例都使用

id

作为选择器。对于多个项目，他们使用不同的

dropzone

声明

---

我如何更改multiple

dropzone

的插件设置，其中选择器将是一个

类

或其他东西，以通过一次

dropzone

初始化获取多个元素？

因为这是使用jQuery的，您不能使用标准的jQuery多选择器方法吗？它看起来是这样的：

$("#drop1, #drop2, #drop3").dropzone();

或者，如果您正在尝试上课，您可以这样做：

$(".drop_zone").dropzone();

这是没有测试，我从来没有使用过这个插件。我只是假设这是可行的，因为它是基于jQuery的

由于这不起作用，请尝试将jquery.dnd-file-upload.js的代码替换为以下代码：

(function ($) {

$.fn.dropzone = function (options) {
var opts = {};
var uploadFiles = function (files) {
$.fn.dropzone.newFilesDropped(); for (var i = 0; i < files.length; i++) {
var file = filesi?;
// create a new xhr object var xhr = new XMLHttpRequest(); var upload = xhr.upload; upload.fileIndex = i; upload.fileObj = file; upload.downloadStartTime = new Date().getTime(); upload.currentStart = upload.downloadStartTime; upload.currentProgress = 0; upload.startData = 0;
// add listeners upload.addEventListener("progress", progress, false);
xhr.onload = function (event) {
load(event, xhr);
};
xhr.open(opts.method, opts.url); xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.send(file);
$.fn.dropzone.uploadStarted(i, file);
}
};
var drop = function (event) {
var dt = event.dataTransfer; var files = dt.files;
event.preventDefault(); uploadFiles(files);
return false;
};
var log = function (logMsg) {
if (opts.printLogs) {
// console && console.log(logMsg);
}
};
// invoked when the input field has changed and new files have been dropped // or selected var change = function (event) {
event.preventDefault();
// get all files ... var files = this.files;
// ... and upload them uploadFiles(files);
};
var progress = function (event) {
if (event.lengthComputable) {
var percentage = Math.round((event.loaded 100) / event.total); if (this.currentProgress != percentage) {
// log(this.fileIndex + " --> " + percentage + "%");
this.currentProgress = percentage; $.fn.dropzone.fileUploadProgressUpdated(this.fileIndex, this.fileObj, this.currentProgress);
var elapsed = new Date().getTime(); var diffTime = elapsed - this.currentStart; if (diffTime >= opts.uploadRateRefreshTime) {
var diffData = event.loaded - this.startData; var speed = diffData / diffTime; // in KB/sec
$.fn.dropzone.fileUploadSpeedUpdated(this.fileIndex, this.fileObj, speed);
this.startData = event.loaded; this.currentStart = elapsed;
}
}
}
};
var load = function (event, xhr) {
var now = new Date().getTime(); var timeDiff = now - this.downloadStartTime; if (opts.onLoadComplete) {
opts.onLoadComplete(xhr.responseText);
} $.fn.dropzone.uploadFinished(this.fileIndex, this.fileObj, timeDiff); log("finished loading of file " + this.fileIndex);
};
var dragenter = function (event) {
event.stopPropagation(); event.preventDefault(); return false;
};
var dragover = function (event) {
event.stopPropagation(); event.preventDefault(); return false;
};
// Extend our default options with those provided. opts = $.extend({}, $.fn.dropzone.defaults, options);
var id = this.attr("id"); var dropzone = document.getElementById(id);
log("adding dnd-file-upload functionalities to element with id: " + id);
// hack for safari on windows: due to not supported drop/dragenter/dragover events we have to create a invisible <input type="file" /> tag instead if ($.client.browser == "Safari" && $.client.os == "Windows") {
var fileInput = $("<input>"); fileInput.attr({
type: "file"
}); fileInput.bind("change", change); fileInput.css({
'opacity': '0', 'width': '100%', 'height': '100%'
}); fileInput.attr("multiple", "multiple"); fileInput.click(function () {
return false;
}); this.append(fileInput);
} else {
dropzone.addEventListener("drop", drop, true); var jQueryDropzone = $("#" + id); jQueryDropzone.bind("dragenter", dragenter); jQueryDropzone.bind("dragover", dragover);
}
return this;
};
$.fn.dropzone.defaults = {
url: "", method: "POST", numConcurrentUploads: 3, printLogs: false, // update upload speed every second uploadRateRefreshTime: 1000
};
// invoked when new files are dropped $.fn.dropzone.newFilesDropped = function () { };
// invoked when the upload for given file has been started $.fn.dropzone.uploadStarted = function (fileIndex, file) { };
// invoked when the upload for given file has been finished $.fn.dropzone.uploadFinished = function (fileIndex, file, time) { };
// invoked when the progress for given file has changed $.fn.dropzone.fileUploadProgressUpdated = function (fileIndex, file,
newProgress) {
};
// invoked when the upload speed of given file has changed $.fn.dropzone.fileUploadSpeedUpdated = function (fileIndex, file,
KBperSecond) {
};
})(jQuery);

（函数（$）{
$.fn.dropzone=函数（选项）{
var opts={}；
var uploadFiles=函数（文件）{
$.fn.dropzone.newfilesdroped（）；for（var i=0；i”+百分比+“%”）；
this.currentProgress=百分比；$.fn.dropzone.FileUploadProgressUpdate（this.fileIndex、this.fileObj、this.currentProgress）；
var expead=new Date（）.getTime（）；var diffTime=expead-this.currentStart；if（diffTime>=opts.uploadratefreshttime）{
var diffData=event.loaded-this.startData；var speed=diffData/diffTime；//以KB/秒为单位
$.fn.dropzone.fileUploadSpeedUpdated（this.fileIndex，this.fileObj，speed）；
this.startData=event.loaded；this.currentStart=appead；
}
}
}
};
var load=函数（事件，xhr）{
var now=new Date（）.getTime（）；var timeDiff=now-this.downloadStartTime；if（opts.onLoadComplete）{
选项onload complete（xhr.responseText）；
}$.fn.dropzone.uploadFinished（this.fileIndex，this.fileObj，timeDiff）；日志（“文件加载完成”+this.fileIndex）；
};
var dragenter=函数（事件）{
event.stopPropagation（）；event.preventDefault（）；返回false；
};
var dragover=功能（事件）{
event.stopPropagation（）；event.preventDefault（）；返回false；
};
//使用提供的选项扩展默认选项。opts=$.Extend（{}，$.fn.dropzone.defaults，options）；
var id=this.attr（“id”）；var dropzone=document.getElementById（id）；
日志（“将dnd文件上载功能添加到id为：“+id”的元素）；
//windows上safari的黑客攻击：由于不支持drop/dragenter/dragover事件，如果（$.client.browser==“safari”&&&$.client.os==“windows”），我们必须创建一个不可见的标记{
var fileInput=$（“”）；fileInput.attr({
类型：“文件”
})；fileInput.bind（“change”，change）；fileInput.css({
“不透明度”：“0”，“宽度”：“100%”，“高度”：“100%”
})；fileInput.attr（“多”、“多”）；fileInput.click（函数（）{
返回false；
})；this.append（fileInput）；
}否则{
dropzone.addEventListener（“drop”，drop，true）；var jQueryDropzone=$（“#”+id）；jQueryDropzone.bind（“dragenter”，dragenter）；jQueryDropzone.bind（“dragover”，dragover）；
}
归还这个；
};
$.fn.dropzone.defaults={
url:，方法：“POST”，numConcurrentUploads:3，printLogs:false，//每秒更新上载速度上载速率刷新时间：1000
};
//在删除新文件时调用$.fn.dropzone.newfilesdroped=function（）{}；
//启动给定文件的上载时调用$.fn.dropzone.uploadStarted=函数（fileIndex，file）{}；
//在完成给定文件的上载时调用$.fn.dropzone.uploadFinished=函数（fileIndex，file，time）{}；
//当给定文件的进度已更改时调用$.fn.dropzone.fileUploadProgressUpdated=函数（fileIndex，file，
（新进展）{
};
//当给定文件的上载速度更改$.fn.dropzone.fileUploadSpeedUpdated=函数（fileIndex，file，
千帕秒）{
};
})（jQuery）；

这是用户rik建议的。leigh@gmail.com这里