jquery 图片文件上传 ajaxUploadFile

80477509 2014-07-03

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

相关推荐

Web全栈笔记 / 0评论 2020-06-15