`

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);

 

分享到:
评论

相关推荐

    php+ajax实现无刷新文件上传功能(ajaxuploadfile)

    在现代Web应用中,无刷新文件上传是一种提升用户体验的重要技术,它允许用户在不重新加载整个页面的情况下上传文件。PHP和AJAX结合可以很好地实现这一功能。本文将深入讲解如何利用PHP和AjaxFileUpload插件来创建一...

    ajaxfileupload.js文件下载

    此为前端进行文件上传,使用Ajax方式提交的js插件,使用方便简洁,开发很高效。

    ajaxFileUpload修复版

    在IT行业中,前端开发经常会遇到文件上传的需求,而AjaxFileUpload是一个非常实用的jQuery插件,用于实现异步文件上传。这个修复版的AjaxFileUpload针对高版本的jQuery进行了优化和兼容性处理,解决了在处理返回的...

    多文件上傳javascript控件,Ajax上傳,含C#範例

    在IT行业中,多文件上传是Web应用程序中常见的一项功能,特别是在需要用户批量上传图片、文档等数据时。本文将深入探讨使用JavaScript控件实现多文件上传,并结合Ajax技术以实现异步传输,同时提供C#后端处理示例。 ...

    php_ajax_file_upload_with_progressbar:使用 php 和 ajax 上传带有进度条的简单文件

    "php_ajax_file_upload_with_progressbar"项目就是针对这种需求而设计的,它利用PHP、jQuery和Ajax技术,实现了一个带有进度条的文件上传功能。下面我们将深入探讨这个项目的核心知识点。 首先,**PHP**是服务器端...

    上传文件返回的json数据会被提示下载问题解决方案

    最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题。前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json。代码如下:  后端Python: 代码如下: def jsonp(func): ...

    原生javascript实现文件异步上传的实例讲解

    原生JavaScript实现文件异步上传的实例讲解包含了使用原生JavaScript创建文件上传功能的核心技术点和实现逻辑。这里将详细解释以下几个主要知识点: 1. HTML表单元素: 实例中使用了HTML的表单元素,包括一个用于...

Global site tag (gtag.js) - Google Analytics