多个拖放文件上传的jQuery插件.zip

/** * fileUploadArea 0.1 * * Copyright (c) 2009 Peter Rudolfsen * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Date: 2009-11-27 */ /** * Add 'sum_numbers' to Array.prototype if it doesn't exist * Not called 'sum' to avoid possible crashes with other implementations of 'sum' */ Array.prototype.sum_numbers = function () { return (!this.length) ? 0 : this.slice(1).sum_numbers() + ((typeof this[0] == 'number') ? this[0] : 0); }; (function ($) { /** * Private variables */ var options = {}, totalSize = 0, numFiles = 0, loadQueue = [], completeQueue = []; /** * Private functions */ function dragEnter(e) { options.onDragEnter.call(this); e.stopPropagation(); e.preventDefault(); } function dragOver(e) { options.onDragOver.call(this); e.stopPropagation(); e.preventDefault(); } function dragLeave(e) { options.onDragLeave.call(this); e.stopPropagation(); e.preventDefault(); } function drop(e) { var files = e.dataTransfer.files, i = 0; numFiles = files.length; e.stopPropagation(); e.preventDefault(); /** * Call the onDrop callback * Calculate total file size */ for (i = 0; i < numFiles; i++) { options.onDrop.call(this, files.item(i)); totalSize += files.item(i).fileSize; } /** * Upload each file */ for (i = 0; i < numFiles; i++) { uploadFile(files.item(i), i); } } function uploadFile(file, queueId) { var xhr = new XMLHttpRequest(), queryString = '?', j = 0; xhr.upload.addEventListener('progress', function (e) { if (e.lengthComputable) { loadQueue[queueId] = e.loaded; options.progress.call(file, Math.round((e.loaded * 100) / e.total), Math.round((loadQueue.sum_numbers() / totalSize) * 100)); } }, false); xhr.upload.addEventListener('load', function (e) { loadQueue[queueId] = e.total; options.progress.call(file, 100, Math.round((loadQueue.sum_numbers() / totalSize) * 100)); /** * Not in use! * Using the AJAX-request to complete the file, to allow for response in the complete callback */ }, false); /** * Sending name and type as GET params in the AJAX-request */ options.params.name = file.fileName; options.params.type = file.type; /** * Build the query string based on options.params */ for (j in options.params) { if (options.params.hasOwnProperty(j)) { queryString += (j + '=' + options.params[j] + '&'); } } /** * Remove trailing '&' */ queryString = queryString.substring(0, queryString.length - 1); /** * Post the file */ xhr.open("POST", options.url + queryString, true); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.onreadystatechange = function (event) { if (xhr.readyState === 4) { if (xhr.status === 200) { /** * The upload is complete */ completeQueue[queueId] = 1; options.fileComplete.call(file, xhr.responseText); if (completeQueue.sum_numbers() === numFiles) { options.complete.call(null); } } else { throw 'Failed uploading file ' + file.fileName; } } }; xhr.sendAsBinary(file.getAsBinary()); } /** * Plugin definition */ $.fn.fileUploadArea = function (opts) { return this.each(function () { if (typeof opts !== 'object') { opts = {}; } options = $.extend({}, { url: 'upload.php', onDragEnter: function () {}, onDragOver: function () {}, onDragLeave: function () {}, onDrop: function (file) {}, progress: function (percent, totalPercent) {}, fileComplete: function () {}, complete: function () {}, params: {} }, opts); this.addEventListener('dragenter', dragEnter, false); this.addEventListener('dragover', dragOver, false); this.addEventListener('dragleave', dragLeave, false); this.addEventListener('drop', drop, false); }); }; })(jQuery);