`

jquery 图片文件上传 ajaxUploadFile

 
阅读更多

   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图片文件上传队列代码.zip

    《jQuery图片文件上传队列代码实现详解》 在现代网页应用中,用户常常需要上传图片或文件,这就涉及到了文件上传的功能。而“jQuery图片文件上传队列代码”则为开发者提供了一种高效的解决方案,它支持批量上传和...

    jquery-大文件上传插件,支持分片上传,断点续传

    总的来说,这个jQuery上传插件是Web开发者处理大文件上传问题的强大工具,通过其丰富的功能和灵活的配置,可以提供一个流畅、安全的用户体验。无论是个人项目还是企业级应用,它都能有效地提升文件上传的效率和用户...

    jquery多文件上传

    "jQuery多文件上传"是利用jQuery实现的网页上批量上传多个文件的功能。这一技术对于提高用户体验,尤其是在需要用户提交大量图片或文档的场景下,显得尤为重要。 在jQuery中实现多文件上传,通常会结合HTML5的File ...

    JQuery多文件上传源码

    JQuery多文件上传源码 利用JQuery控制文件上传,页面中引入相关的js文件。一次选取多个文件,等待上传至服务器中指定目录。前台页面可以对已添加的文件进行删除操作,也可以多次添加文件到上传候选列表。上传文件...

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...

    jquery文件图片上传插件

    对于非图片文件,可能只显示文件名或者提供预览提示。文件验证则可以检查文件类型和大小,不符合条件的文件将被拒绝上传。 接下来是文件上传的实现。利用XMLHttpRequest或者fetch API创建异步请求,将文件数据以...

    jquery实现图片即时上传

    然而,现代的解决方案更倾向于使用HTML5的`FormData`对象,它允许我们发送二进制数据,如图片文件,到服务器。 以下是一个简单的`jQuery`图片上传示例: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code....

    jQuery图片文件批量上传队列代码.zip

    《jQuery图片文件批量上传队列代码详解》 在现代网页开发中,用户界面的交互性和用户体验是至关重要的因素。为了满足这些需求,开发者们经常需要用到文件上传功能,特别是图片的批量上传。jQuery作为一款广泛使用的...

    jquery批量上传图片插件

    在IT行业中,jQuery是一个非常流行的JavaScript库...总的来说,"jQuery批量上传图片插件"是一个实用的工具,它结合了jQuery的便利性和文件上传的复杂性,为Web开发人员提供了一个快速实现批量图片上传功能的解决方案。

    PHP多文件上传插件,PHP+jQuery+Ajax多图片上传

    总的来说,PHP+jQuery+Ajax多图片上传插件是构建高效、易用的文件上传功能的理想选择。它通过分离前后端任务,实现了无刷新的用户体验,同时利用Ajax提供了流畅的进度反馈。在实际开发中,开发者可以根据项目需求...

    Jquery上传文件或图片

    **jQuery上传文件或图片**是Web开发中常见的一种交互功能,尤其在现代网站设计中扮演着重要角色。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个实例中,...

    jquery 多文件上传 (java)

    在 Web 开发中,文件上传是一个常见的需求,特别是当用户需要提交图片、文档或其他媒体文件时。jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理和Ajax交互等任务。而 Java 在后端作为服务器端语言...

    jQuery支持预览多个文件_多张图片批量上传插件

    本文将详细讲解如何使用jQuery实现一个支持预览多个文件和多张图片批量上传的插件。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在批量上传图片的场景中...

    jquery 大文件上传

    本主题将深入探讨如何使用jQuery实现大文件上传,并动态显示上传进度。 一、jQuery大文件上传原理 在传统的HTTP协议中,一次请求只能发送一个文件,对于大文件,可能会导致浏览器内存溢出或超时。为了解决这个问题...

    jquery图片裁切+PHP文件上传

    在jQuery图片裁切后,我们需要通过PHP接收上传的图片文件,进行存储和进一步处理。 PHP文件上传涉及的关键函数有`$_FILES`全局变量(用于存储上传文件的信息)、`move_uploaded_file()`(用于将临时文件移动到...

    .net + jquery 多文件上传

    这是一个常见的需求,在Web应用中,用户可能需要一次性上传多个文件,如图片、文档等。下面我们将深入探讨这个话题。 首先,.NET框架是微软开发的一个用于构建Web应用程序的全面平台,它提供了大量的类库和服务,...

    jQuery图片批量上传支持多图片上传预览插件.zip

    jQuery插件会使用FileReader API读取图片文件,并创建`&lt;img&gt;`元素显示预览。FileReader的`readAsDataURL()`方法可以将图片文件转化为数据URL,然后赋值给`&lt;img&gt;`元素的`src`属性,实现预览。 四、进度条显示 批量...

    jquery 文件上传资料

    在Web开发中,文件上传是一个常见的功能,特别是在用户需要提交图片、文档等数据时。jQuery,作为一个广泛使用的JavaScript库,提供了许多方便的插件来简化这个过程,使得文件上传变得更加直观和用户体验友好。本文...

    jquery文件上传插件(多文件选择、带进度条 ,图片预览)

    本教程将深入讲解如何使用jQuery实现一个功能丰富的文件上传插件,包括多文件选择、进度条显示和图片预览。 首先,我们需要引入jQuery库和WebUploader插件。WebUploader是由阿里团队开发的一款优秀的文件上传组件,...

Global site tag (gtag.js) - Google Analytics