jQuery dnd文件上傳多個目標

Question

我正在使用jQuery dnd file upload plugin爲一個項目。 dnd上傳器的所有示例都使用id作爲選擇器。對於多個項目，他們使用不同的dropzone聲明。

我怎樣才能更改多個dropzone其中，選擇將是一個class或別的東西搶了單dropzone引發多種元素插件的設置？

Answer 1

因爲這是使用jQuery，你不能使用標準的jQuery多選擇器方法嗎？它應該是這樣的：

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

或者，如果你正在嘗試做的一類，你可以這樣做：

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

這不是測試，我從來沒有使用這個插件。我只是假設這將工作，因爲它是基於jQuery。

由於不工作，請嘗試使用下面的替代代碼爲jquery.dnd文件-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); 

這是由這裏的用戶rik.leigh@gmail.com建議http://code.google.com/p/dnd-file-upload/wiki/howto