AjaxFileUpload.js
修改后:
(function ($, document) { $.extend({ ajaxUploadFile: function (options) { function getId() { return (new Date).getTime() } function createIFrame() { //create frame var iframeId = 'uploadIFrame' + getId(); var $iframe = $('<iframe src="javascript:false" style="display:none"></iframe>'); $iframe.attr('id', iframeId); $iframe.attr('name', iframeId); $iframe.appendTo(document.body); return $('#' + iframeId); } function createForm(actionEle, data) { //create form var newEleId = 'actionEle' + getId(); var formId = 'uploadForm' + getId(); var $form = $('<form action="#" method="POST" name="uploadForm" encoding="multipart/form-data" enctype="multipart/form-data" style="display:none"></form>'); $form.attr('id', formId); if (typeof data == "object") { for (var name in data) { $('<input type="hidden" name="' + name + '" value="' + data[name] + '" />').appendTo($form); } } var newEle = $(actionEle).clone(); $(actionEle).before(newEle); $(actionEle).attr('id', newEleId); $(actionEle).appendTo($form); $form.appendTo('body'); return $('#' + formId); } function handleError(opts, xhr, status, e) { if (opts.error) { opts.error.call(opts.context || opts, xhr, status, e); } if (opts.global) { (opts.context ? $(opts.context) : $.event).trigger("ajaxError", [xhr, opts, e]); } } function parseHttpData(r, type) { var data = !type; data = (type == "xml" || data) ? r.responseXML : r.responseText; if (type == "script") { // If the type is "script", eval it in global context $.globalEval(data) } else if (type == "json") { // Get the JavaScript object, if JSON is used. var str = $(data).text(); data = $.parseJSON(str) } else if (type == "html") { // evaluate scripts within html $("<div>").html(data).evalScripts(); } else { $("<div>").html(data) } return data; } // actionEle, url, data var opts = $.extend($.ajaxSettings, options || {}); var $iframe = createIFrame(); var $form = createForm(opts.actionEle, opts.data); // Watch for a new set of requests if (opts.global && !$.active++) { $.event.trigger("ajaxStart"); } var requestDone = false; var xml = {}; if (opts.global) $.event.trigger("ajaxSend", [xml, opts]); var uploadCallback = function (isTimeout) { var iframe = document.getElementById($iframe.attr('id')); try { if (iframe.contentWindow) { xml.responseText = iframe.contentWindow.document.body ? iframe.contentWindow.document.body.innerHTML : null; xml.responseXML = iframe.contentWindow.document.XMLDocument ? iframe.contentWindow.document.XMLDocument : iframe.contentWindow.document; } else if (iframe.contentDocument) { xml.responseText = iframe.contentDocument.document.body ? iframe.contentDocument.document.body.innerHTML : null; xml.responseXML = iframe.contentDocument.document.XMLDocument ? iframe.contentDocument.document.XMLDocument : iframe.contentDocument.document; } } catch (e) { handleError(opts, xml, null, e); } if (xml || isTimeout == "timeout") { requestDone = true; var status; try { status = isTimeout != "timeout" ? "success" : "error"; if (status != "error") { var data = parseHttpData(xml, opts.dataType); if (opts.success) opts.success(data, status); if (opts.global) $.event.trigger("ajaxSuccess", [xml, opts]); } else handleError(opts, xml, status); } catch (e) { status = "error"; handleError(opts, xml, status, e); } if (opts.global) $.event.trigger("ajaxComplete", [xml, opts]); // Handle the global AJAX counter if (opts.global && !--$.active) $.event.trigger("ajaxStop"); // Process result if (opts.complete) opts.complete(xml, status); $($iframe).unbind(); setTimeout(function () { try { $($iframe).remove(); $($form).remove(); } catch (e) { handleError(opts, xml, null, e); } }, 1000); xml = null } }; // Timeout checker if (opts.timeout > 0) { setTimeout(function () { // Check to see if the request is still happening if (!requestDone) uploadCallback("timeout"); }, opts.timeout); } try { $form.attr('action', opts.url); $form.attr('method', 'POST'); $form.attr('target', $iframe.attr('name')); $form.submit(); } catch (e) { handleError(opts, xml, null, e); } $iframe.load(uploadCallback); return {abort: function () { }}; } }) })(jQuery, document);
相关推荐
《jQuery图片文件上传队列代码实现详解》 在现代网页应用中,用户常常需要上传图片或文件,这就涉及到了文件上传的功能。而“jQuery图片文件上传队列代码”则为开发者提供了一种高效的解决方案,它支持批量上传和...
总的来说,这个jQuery上传插件是Web开发者处理大文件上传问题的强大工具,通过其丰富的功能和灵活的配置,可以提供一个流畅、安全的用户体验。无论是个人项目还是企业级应用,它都能有效地提升文件上传的效率和用户...
"jQuery多文件上传"是利用jQuery实现的网页上批量上传多个文件的功能。这一技术对于提高用户体验,尤其是在需要用户提交大量图片或文档的场景下,显得尤为重要。 在jQuery中实现多文件上传,通常会结合HTML5的File ...
JQuery多文件上传源码 利用JQuery控制文件上传,页面中引入相关的js文件。一次选取多个文件,等待上传至服务器中指定目录。前台页面可以对已添加的文件进行删除操作,也可以多次添加文件到上传候选列表。上传文件...
《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...
对于非图片文件,可能只显示文件名或者提供预览提示。文件验证则可以检查文件类型和大小,不符合条件的文件将被拒绝上传。 接下来是文件上传的实现。利用XMLHttpRequest或者fetch API创建异步请求,将文件数据以...
然而,现代的解决方案更倾向于使用HTML5的`FormData`对象,它允许我们发送二进制数据,如图片文件,到服务器。 以下是一个简单的`jQuery`图片上传示例: ```html <!DOCTYPE html> <script src="https://code....
《jQuery图片文件批量上传队列代码详解》 在现代网页开发中,用户界面的交互性和用户体验是至关重要的因素。为了满足这些需求,开发者们经常需要用到文件上传功能,特别是图片的批量上传。jQuery作为一款广泛使用的...
在IT行业中,jQuery是一个非常流行的JavaScript库...总的来说,"jQuery批量上传图片插件"是一个实用的工具,它结合了jQuery的便利性和文件上传的复杂性,为Web开发人员提供了一个快速实现批量图片上传功能的解决方案。
**jQuery上传文件或图片**是Web开发中常见的一种交互功能,尤其在现代网站设计中扮演着重要角色。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个实例中,...
在 Web 开发中,文件上传是一个常见的需求,特别是当用户需要提交图片、文档或其他媒体文件时。jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理和Ajax交互等任务。而 Java 在后端作为服务器端语言...
在IT行业中,文件上传是网页应用中常见的功能之一,尤其在处理用户需要批量上传图片、文档等场景下显得尤为重要。本实例将详细讲解如何利用jQuery实现多文件上传,并结合PHP和Java后端处理上传的数据。 首先,...
本主题将深入探讨如何使用jQuery实现大文件上传,并动态显示上传进度。 一、jQuery大文件上传原理 在传统的HTTP协议中,一次请求只能发送一个文件,对于大文件,可能会导致浏览器内存溢出或超时。为了解决这个问题...
在jQuery图片裁切后,我们需要通过PHP接收上传的图片文件,进行存储和进一步处理。 PHP文件上传涉及的关键函数有`$_FILES`全局变量(用于存储上传文件的信息)、`move_uploaded_file()`(用于将临时文件移动到...
这是一个常见的需求,在Web应用中,用户可能需要一次性上传多个文件,如图片、文档等。下面我们将深入探讨这个话题。 首先,.NET框架是微软开发的一个用于构建Web应用程序的全面平台,它提供了大量的类库和服务,...
总的来说,PHP+jQuery+Ajax多图片上传插件是构建高效、易用的文件上传功能的理想选择。它通过分离前后端任务,实现了无刷新的用户体验,同时利用Ajax提供了流畅的进度反馈。在实际开发中,开发者可以根据项目需求...
jQuery插件会使用FileReader API读取图片文件,并创建`<img>`元素显示预览。FileReader的`readAsDataURL()`方法可以将图片文件转化为数据URL,然后赋值给`<img>`元素的`src`属性,实现预览。 四、进度条显示 批量...
在Web开发中,文件上传是一个常见的功能,特别是在用户需要提交图片、文档等数据时。jQuery,作为一个广泛使用的JavaScript库,提供了许多方便的插件来简化这个过程,使得文件上传变得更加直观和用户体验友好。本文...
本教程将深入讲解如何使用jQuery实现一个功能丰富的文件上传插件,包括多文件选择、进度条显示和图片预览。 首先,我们需要引入jQuery库和WebUploader插件。WebUploader是由阿里团队开发的一款优秀的文件上传组件,...