AjaxUpLoad.js使用实现文件上传

AjaxUpLoad.js的使用实现无刷新文件上传,如图。

图1 文件上传前

图2 文件上传后

1、创建页面并编写HTML
上传文档:

 <div class="uploadFile">
        <span id="doc"><input type="text" disabled="disabled" /></span>
        <input type="hidden" id="hidFileName"  />
        <input type="button" id="btnUploadFile" value="上传" />
        <input type="button" id="btnDeleteFile" value="删除"  />
    </div>

上传图片:

<div class="uploadImg">
        <img id="imgShow" src="/images/nophoto.gif" />
        <input type="hidden" id="hidImgName" />
        <input type="button" id="btnUploadImg" value="上传" />
        <input type="button" id="btnDeleteImg" value="删除" />
    </div>

2、引用AjaxUpload.js文件

 <script src="/js/common/AjaxUpload.js" type="text/javascript"></script>

3、编写JS脚本

  window.onload = function() {
        init();  //初始化
    }  

    //初始化
    function init() {
        //初始化文档上传
        var btnFile = document.getElementById("btnUploadFile");
        var doc = document.getElementById("doc");
        var hidFileName = document.getElementById("hidFileName");
        document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); };
        g_AjxUploadFile(btnFile, doc, hidFileName);  

        //初始化图片上传
        var btnImg = document.getElementById("btnUploadImg");
        var img = document.getElementById("imgShow");
        var hidImgName = document.getElementById("hidImgName");
        document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); };
        g_AjxUploadImg(btnImg, img, hidImgName);
    }  

    var g_AjxTempDir = "/file/temp/";
    //文档上传
    function g_AjxUploadFile(btn, doc, hidPut, action) {
        var button = btn, interval;
        new AjaxUpload(button, {
        action: ((action == null || action == undefined) ? ‘/Common/UploadHandler.ashx?fileType=file‘ : action),
            data: {},
            name: ‘myfile‘,
            onSubmit: function(file, ext) {
                if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) {
                    alert("您上传的文档格式不对,请重新选择!");
                    return false;
                }
            },
            onComplete: function(file, response) {
                flagValue = response;
                if (flagValue == "1") {
                    alert("您上传的文档格式不对,请重新选择!");
                }
                else if (flagValue == "2") {
                    alert("您上传的文档大于2M,请重新选择!");
                }
                else if (flagValue == "3") {
                    alert("文档上传失败!");
                }
                else {
                    hidPut.value = response;
                    doc.innerHTML="<a href=‘" + g_AjxTempDir + response + "‘ target=‘_blank‘>" + response + "</a>";
                }
            }
        });
    }
    //图片上传
    function g_AjxUploadImg(btn, img, hidPut) {
        var button = btn, interval;
        new AjaxUpload(button, {
            action: ‘/Common/UploadHandler.ashx?fileType=img‘,
            data: {},
            name: ‘myfile‘,
            onSubmit: function(file, ext) {
                if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) {
                    alert("您上传的图片格式不对,请重新选择!");
                    return false;
                }
            },
            onComplete: function(file, response) {
                flagValue = response;
                if (flagValue == "1") {
                    alert("您上传的图片格式不对,请重新选择!");
                }
                else if (flagValue == "2") {
                    alert("您上传的图片大于200K,请重新选择!");
                }
                else if (flagValue == "3") {
                    alert("图片上传失败!");
                }
                else {
                    hidPut.value = response;
                    img.src = g_AjxTempDir + response;
                }
            }
        });
    }  

    //删除文档
    function DelFile(doc, hidPut) {
        hidPut.value = "";
        doc.innerHTML = "<input type=\"text\" disabled=\"disabled\" />";
    }  

    //删除图片
    function DelImg(img, hidPut) {
        hidPut.value = "";
        img.src = "/images/nophoto.gif";
    }

4、创建/Common/UploadHandler.ashx处理程序

<%@ WebHandler Language="C#" Class="UploadHandler" %>  

    using System;
    using System.Web;
    using System.Text.RegularExpressions;
    using System.IO;  

    public class UploadHandler : IHttpHandler {
        private string _filedir = "";    //文件目录
        /// <summary>
        /// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest (HttpContext context) {
            _filedir = context.Server.MapPath(@"/file/temp/");
            try
            {
                string result = "3";
                string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型
                if (fileType == "file")
                {
                    result = UploadFile(context);  //文档上传
                }
                else if (fileType == "img")
                {
                    result = UploadImg(context);   //图片上传
                }
                context.Response.Write(result);
            }
            catch
            {
                context.Response.Write("3");//3文件上传失败
            }
        }  

        /// <summary>
        /// 文档上传
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        private string UploadFile(HttpContext context)
        {
            int cout = context.Request.Files.Count;
            if (cout > 0)
            {
                HttpPostedFile hpf = context.Request.Files[0];
                if (hpf != null)
                {
                    string fileExt = Path.GetExtension(hpf.FileName).ToLower();
                    //只能上传文件,过滤不可上传的文件类型
                    string fileFilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......";
                    if (fileFilt.IndexOf(fileExt) <= -1)
                    {
                        return "1";
                    }  

                    //判断文件大小
                    int length = hpf.ContentLength;
                    if (length > 2097152)
                    {
                        return "2";
                    }    

                    Random rd = new Random();
                    DateTime nowTime = DateTime.Now;
                    string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName);
                    if (!Directory.Exists(_filedir))
                    {
                        Directory.CreateDirectory(_filedir);
                    }
                    string fileName = _filedir + newFileName;
                    hpf.SaveAs(fileName);
                    return newFileName;
                }  

            }
            return "3";
        }  

        /// <summary>
        /// 图片上传
        /// </summary>
        /// <param name="context"></param>
        /// <returns></returns>
        private string UploadImg(HttpContext context)
        {
            int cout = context.Request.Files.Count;
            if (cout > 0)
            {
                HttpPostedFile hpf = context.Request.Files[0];
                if (hpf != null)
                {
                    string fileExt = Path.GetExtension(hpf.FileName).ToLower();
                    //只能上传文件,过滤不可上传的文件类型
                    string fileFilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......";
                    if (fileFilt.IndexOf(fileExt) <= -1)
                    {
                        return "1";
                    }  

                    //判断文件大小
                    int length = hpf.ContentLength;
                    if (length > 204800)
                    {
                        return "2";
                    }  

                    Random rd = new Random();
                    DateTime nowTime = DateTime.Now;
                    string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName);
                    if (!Directory.Exists(_filedir))
                    {
                        Directory.CreateDirectory(_filedir);
                    }
                    string fileName = _filedir + newFileName;
                    hpf.SaveAs(fileName);
                    return newFileName;
                }  

            }
            return "3";
        }  

        #region IHttpHandler 成员  

        public bool IsReusable
        {
            get { throw new NotImplementedException(); }
        }  

        #endregion
    }

附件1:页面CSS样式

/*上传文件*/
    .uploadFile{margin-bottom:10px;}
    /*上传图片*/
    .uploadImg{}
    .uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}

附件2:AjaxUpload.js文件

/**
     * AJAX Upload ( http://valums.com/ajax-upload/ )
     * Copyright (c) Andris Valums
     * Licensed under the MIT license ( http://valums.com/mit-license/ )
     * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions
     */
    (function () {
        /* global window */
        /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */  

        /**
         * Wrapper for FireBug‘s console.log
         */  

        function log() {
            if (typeof(console) != ‘undefined‘ && typeof(console.log) == ‘function‘) {
                Array.prototype.unshift.call(arguments, ‘[Ajax Upload]‘);
                console.log(Array.prototype.join.call(arguments, ‘ ‘));
            }
        }  

        /**
         * Attaches event to a dom element.
         * @param {Element} el
         * @param type event name
         * @param fn callback This refers to the passed element
         */  

        function addEvent(el, type, fn) {
            if (el.addEventListener) {
                el.addEventListener(type, fn, false);
            } else if (el.attachEvent) {
                el.attachEvent(‘on‘ + type, function () {
                    fn.call(el);
                });
            } else {
                throw new Error(‘not supported or DOM not loaded‘);
            }
        }  

        /**
         * Attaches resize event to a window, limiting
         * number of event fired. Fires only when encounteres
         * delay of 100 after series of events.
         *
         * Some browsers fire event multiple times when resizing
         * http://www.quirksmode.org/dom/events/resize.html
         *
         * @param fn callback This refers to the passed element
         */  

        function addResizeEvent(fn) {
            var timeout;  

            addEvent(window, ‘resize‘, function () {
                if (timeout) {
                    clearTimeout(timeout);
                }
                timeout = setTimeout(fn, 100);
            });
        }  

        // Needs more testing, will be rewriten for next version
        // getOffset function copied from jQuery lib (http://jquery.com/)
        if (document.documentElement.getBoundingClientRect) {
            // Get Offset using getBoundingClientRect
            // http://ejohn.org/blog/getboundingclientrect-is-awesome/
            var getOffset = function (el) {
                var box = el.getBoundingClientRect();
                var doc = el.ownerDocument;
                var body = doc.body;
                var docElem = doc.documentElement; // for ie
                var clientTop = docElem.clientTop || body.clientTop || 0;
                var clientLeft = docElem.clientLeft || body.clientLeft || 0;  

                // In Internet Explorer 7 getBoundingClientRect property is treated as physical,
                // while others are logical. Make all logical, like in IE8.
                var zoom = 1;
                if (body.getBoundingClientRect) {
                    var bound = body.getBoundingClientRect();
                    zoom = (bound.right - bound.left) / body.clientWidth;
                }  

                if (zoom > 1) {
                    clientTop = 0;
                    clientLeft = 0;
                }  

                var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop,
                    left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft;  

                return {
                    top: top,
                    left: left
                };
            };
        } else {
            // Get offset adding all offsets
            var getOffset = function (el) {
                var top = 0,
                    left = 0;
                do {
                    top += el.offsetTop || 0;
                    left += el.offsetLeft || 0;
                    el = el.offsetParent;
                } while (el);  

                return {
                    left: left,
                    top: top
                };
            };
        }  

        /**
         * Returns left, top, right and bottom properties describing the border-box,
         * in pixels, with the top-left relative to the body
         * @param {Element} el
         * @return {Object} Contains left, top, right,bottom
         */  

        function getBox(el) {
            var left, right, top, bottom;
            var offset = getOffset(el);
            left = offset.left;
            top = offset.top;  

            right = left + el.offsetWidth;
            bottom = top + el.offsetHeight;  

            return {
                left: left,
                right: right,
                top: top,
                bottom: bottom
            };
        }  

        /**
         * Helper that takes object literal
         * and add all properties to element.style
         * @param {Element} el
         * @param {Object} styles
         */  

        function addStyles(el, styles) {
            for (var name in styles) {
                if (styles.hasOwnProperty(name)) {
                    el.style[name] = styles[name];
                }
            }
        }  

        /**
         * Function places an absolutely positioned
         * element on top of the specified element
         * copying position and dimentions.
         * @param {Element} from
         * @param {Element} to
         */  

        function copyLayout(from, to) {
            var box = getBox(from);  

            addStyles(to, {
                position: ‘absolute‘,
                left: box.left + ‘px‘,
                top: box.top + ‘px‘,
                width: from.offsetWidth + ‘px‘,
                height: from.offsetHeight + ‘px‘
            });
        }  

        /**
         * Creates and returns element from html chunk
         * Uses innerHTML to create an element
         */
        var toElement = (function () {
            var div = document.createElement(‘div‘);
            return function (html) {
                div.innerHTML = html;
                var el = div.firstChild;
                return div.removeChild(el);
            };
        })();  

        /**
         * Function generates unique id
         * @return unique id
         */
        var getUID = (function () {
            var id = 0;
            return function () {
                return ‘ValumsAjaxUpload‘ + id++;
            };
        })();  

        /**
         * Get file name from path
         * @param {String} file path to file
         * @return filename
         */  

        function fileFromPath(file) {
            return file.replace(/.*(\/|\\)/, "");
        }  

        /**
         * Get file extension lowercase
         * @param {String} file name
         * @return file extenstion
         */  

        function getExt(file) {
            return (-1 !== file.indexOf(‘.‘)) ? file.replace(/.*[.]/, ‘‘) : ‘‘;
        }  

        function hasClass(el, name) {
            var re = new RegExp(‘\\b‘ + name + ‘\\b‘);
            return re.test(el.className);
        }  

        function addClass(el, name) {
            if (!hasClass(el, name)) {
                el.className += ‘ ‘ + name;
            }
        }  

        function removeClass(el, name) {
            var re = new RegExp(‘\\b‘ + name + ‘\\b‘);
            el.className = el.className.replace(re, ‘‘);
        }  

        function removeNode(el) {
            el.parentNode.removeChild(el);
        }  

        /**
         * Easy styling and uploading
         * @constructor
         * @param button An element you want convert to
         * upload button. Tested dimentions up to 500x500px
         * @param {Object} options See defaults below.
         */
        window.AjaxUpload = function (button, options) {
            this._settings = {
                // Location of the server-side upload script
                action: ‘upload.php‘,
                // File upload name
                name: ‘userfile‘,
                // Additional data to send
                data: {},
                // Submit file as soon as it‘s selected
                autoSubmit: true,
                // The type of data that you‘re expecting back from the server.
                // html and xml are detected automatically.
                // Only useful when you are using json data as a response.
                // Set to "json" in that case.
                responseType: false,
                // Class applied to button when mouse is hovered
                hoverClass: ‘hover‘,
                // Class applied to button when AU is disabled
                disabledClass: ‘disabled‘,
                // When user selects a file, useful with autoSubmit disabled
                // You can return false to cancel upload
                onChange: function (file, extension) {},
                // Callback to fire before file is uploaded
                // You can return false to cancel upload
                onSubmit: function (file, extension) {},
                // Fired when file upload is completed
                // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
                onComplete: function (file, response) {}
            };  

            // Merge the users options with our defaults
            for (var i in options) {
                if (options.hasOwnProperty(i)) {
                    this._settings[i] = options[i];
                }
            }  

            // button isn‘t necessary a dom element
            if (button.jquery) {
                // jQuery object was passed
                button = button[0];
            } else if (typeof button == "string") {
                if (/^#.*/.test(button)) {
                    // If jQuery user passes #elementId don‘t break it
                    button = button.slice(1);
                }  

                button = document.getElementById(button);
            }  

            if (!button || button.nodeType !== 1) {
                throw new Error("Please make sure that you‘re passing a valid element");
            }  

            if (button.nodeName.toUpperCase() == ‘A‘) {
                // disable link
                addEvent(button, ‘click‘, function (e) {
                    if (e && e.preventDefault) {
                        e.preventDefault();
                    } else if (window.event) {
                        window.event.returnValue = false;
                    }
                });
            }  

            // DOM element
            this._button = button;
            // DOM element
            this._input = null;
            // If disabled clicking on button won‘t do anything
            this._disabled = false;  

            // if the button was disabled before refresh if will remain
            // disabled in FireFox, let‘s fix it
            this.enable();  

            this._rerouteClicks();
        };  

        // assigning methods to our class
        AjaxUpload.prototype = {
            setData: function (data) {
                this._settings.data = data;
            },
            disable: function () {
                addClass(this._button, this._settings.disabledClass);
                this._disabled = true;  

                var nodeName = this._button.nodeName.toUpperCase();
                if (nodeName == ‘INPUT‘ || nodeName == ‘BUTTON‘) {
                    this._button.setAttribute(‘disabled‘, ‘disabled‘);
                }  

                // hide input
                if (this._input) {
                    // We use visibility instead of display to fix problem with Safari 4
                    // The problem is that the value of input doesn‘t change if it
                    // has display none when user selects a file
                    this._input.parentNode.style.visibility = ‘hidden‘;
                }
            },
            enable: function () {
                removeClass(this._button, this._settings.disabledClass);
                this._button.removeAttribute(‘disabled‘);
                this._disabled = false;  

            },
            /**
             * Creates invisible file input
             * that will hover above the button
             * <div><input type=‘file‘ /></div>
             */
            _createInput: function () {
                var self = this;  

                var input = document.createElement("input");
                input.setAttribute(‘type‘, ‘file‘);
                input.setAttribute(‘name‘, this._settings.name);  

                addStyles(input, {
                    ‘position‘: ‘absolute‘,
                    // in Opera only ‘browse‘ button
                    // is clickable and it is located at
                    // the right side of the input
                    ‘right‘: 0,
                    ‘margin‘: 0,
                    ‘padding‘: 0,
                    ‘fontSize‘: ‘480px‘,
                    ‘cursor‘: ‘pointer‘
                });  

                var div = document.createElement("div");
                addStyles(div, {
                    ‘display‘: ‘block‘,
                    ‘position‘: ‘absolute‘,
                    ‘overflow‘: ‘hidden‘,
                    ‘margin‘: 0,
                    ‘padding‘: 0,
                    ‘opacity‘: 0,
                    // Make sure browse button is in the right side
                    // in Internet Explorer
                    ‘direction‘: ‘ltr‘,
                    //Max zIndex supported by Opera 9.0-9.2
                    ‘zIndex‘: 2147483583
                });  

                // Make sure that element opacity exists.
                // Otherwise use IE filter
                if (div.style.opacity !== "0") {
                    if (typeof(div.filters) == ‘undefined‘) {
                        throw new Error(‘Opacity not supported by the browser‘);
                    }
                    div.style.filter = "alpha(opacity=0)";
                }  

                addEvent(input, ‘change‘, function () {  

                    if (!input || input.value === ‘‘) {
                        return;
                    }  

                    // Get filename from input, required
                    // as some browsers have path instead of it
                    var file = fileFromPath(input.value);  

                    if (false === self._settings.onChange.call(self, file, getExt(file))) {
                        self._clearInput();
                        return;
                    }  

                    // Submit form when value is changed
                    if (self._settings.autoSubmit) {
                        self.submit();
                    }
                });  

                addEvent(input, ‘mouseover‘, function () {
                    addClass(self._button, self._settings.hoverClass);
                });  

                addEvent(input, ‘mouseout‘, function () {
                    removeClass(self._button, self._settings.hoverClass);  

                    // We use visibility instead of display to fix problem with Safari 4
                    // The problem is that the value of input doesn‘t change if it
                    // has display none when user selects a file
                    input.parentNode.style.visibility = ‘hidden‘;  

                });  

                div.appendChild(input);
                document.body.appendChild(div);  

                this._input = input;
            },
            _clearInput: function () {
                if (!this._input) {
                    return;
                }  

                // this._input.value = ‘‘; Doesn‘t work in IE6
                removeNode(this._input.parentNode);
                this._input = null;
                this._createInput();  

                removeClass(this._button, this._settings.hoverClass);
            },
            /**
             * Function makes sure that when user clicks upload button,
             * the this._input is clicked instead
             */
            _rerouteClicks: function () {
                var self = this;  

                // IE will later display ‘access denied‘ error
                // if you use using self._input.click()
                // other browsers just ignore click()  

                addEvent(self._button, ‘mouseover‘, function () {
                    if (self._disabled) {
                        return;
                    }  

                    if (!self._input) {
                        self._createInput();
                    }  

                    var div = self._input.parentNode;
                    copyLayout(self._button, div);
                    div.style.visibility = ‘visible‘;  

                });  

                // commented because we now hide input on mouseleave
                /**
                 * When the window is resized the elements
                 * can be misaligned if button position depends
                 * on window size
                 */
                //addResizeEvent(function(){
                //    if (self._input){
                //        copyLayout(self._button, self._input.parentNode);
                //    }
                //});              

            },
            /**
             * Creates iframe with unique name
             * @return {Element} iframe
             */
            _createIframe: function () {
                // We can‘t use getTime, because it sometimes return
                // same value in safari :(
                var id = getUID();  

                // We can‘t use following code as the name attribute
                // won‘t be properly registered in IE6, and new window
                // on form submit will open
                // var iframe = document.createElement(‘iframe‘);
                // iframe.setAttribute(‘name‘, id);                          

                var iframe = toElement(‘<iframe src="javascript:false;" name="‘ + id + ‘" />‘);
                // src="javascript:false; was added
                // because it possibly removes ie6 prompt
                // "This page contains both secure and nonsecure items"
                // Anyway, it doesn‘t do any harm.
                iframe.setAttribute(‘id‘, id);  

                iframe.style.display = ‘none‘;
                document.body.appendChild(iframe);  

                return iframe;
            },
            /**
             * Creates form, that will be submitted to iframe
             * @param {Element} iframe Where to submit
             * @return {Element} form
             */
            _createForm: function (iframe) {
                var settings = this._settings;  

                // We can‘t use the following code in IE6
                // var form = document.createElement(‘form‘);
                // form.setAttribute(‘method‘, ‘post‘);
                // form.setAttribute(‘enctype‘, ‘multipart/form-data‘);
                // Because in this case file won‘t be attached to request
                var form = toElement(‘<form method="post" enctype="multipart/form-data"></form>‘);  

                form.setAttribute(‘action‘, settings.action);
                form.setAttribute(‘target‘, iframe.name);
                form.style.display = ‘none‘;
                document.body.appendChild(form);  

                // Create hidden input element for each data key
                for (var prop in settings.data) {
                    if (settings.data.hasOwnProperty(prop)) {
                        var el = document.createElement("input");
                        el.setAttribute(‘type‘, ‘hidden‘);
                        el.setAttribute(‘name‘, prop);
                        el.setAttribute(‘value‘, settings.data[prop]);
                        form.appendChild(el);
                    }
                }
                return form;
            },
            /**
             * Gets response from iframe and fires onComplete event when ready
             * @param iframe
             * @param file Filename to use in onComplete callback
             */
            _getResponse: function (iframe, file) {
                // getting response
                var toDeleteFlag = false,
                    self = this,
                    settings = this._settings;  

                addEvent(iframe, ‘load‘, function () {  

                    if ( // For Safari
                    iframe.src == "javascript:‘%3Chtml%3E%3C/html%3E‘;" ||
                    // For FF, IE
                    iframe.src == "javascript:‘<html></html>‘;") {
                        // First time around, do not delete.
                        // We reload to blank page, so that reloading main page
                        // does not re-submit the post.  

                        if (toDeleteFlag) {
                            // Fix busy state in FF3
                            setTimeout(function () {
                                removeNode(iframe);
                            },
                            0);
                        }  

                        return;
                    }  

                    var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document;  

                    // fixing Opera 9.26,10.00
                    if (doc.readyState && doc.readyState != ‘complete‘) {
                        // Opera fires load event multiple times
                        // Even when the DOM is not ready yet
                        // this fix should not affect other browsers
                        return;
                    }  

                    // fixing Opera 9.64
                    if (doc.body && doc.body.innerHTML == "false") {
                        // In Opera 9.64 event was fired second time
                        // when body.innerHTML changed from false
                        // to server response approx. after 1 sec
                        return;
                    }  

                    var response;  

                    if (doc.XMLDocument) {
                        // response is a xml document Internet Explorer property
                        response = doc.XMLDocument;
                    } else if (doc.body) {
                        // response is html document or plain text
                        response = doc.body.innerHTML;  

                        if (settings.responseType && settings.responseType.toLowerCase() == ‘json‘) {
                            // If the document was sent as ‘application/javascript‘ or
                            // ‘text/javascript‘, then the browser wraps the text in a <pre>
                            // tag and performs html encoding on the contents.  In this case,
                            // we need to pull the original text content from the text node‘s
                            // nodeValue property to retrieve the unmangled content.
                            // Note that IE6 only understands text/html
                            if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == ‘PRE‘) {
                                response = doc.body.firstChild.firstChild.nodeValue;
                            }  

                            if (response) {
                                response = eval("(" + response + ")");
                            } else {
                                response = {};
                            }
                        }
                    } else {
                        // response is a xml document
                        response = doc;
                    }  

                    settings.onComplete.call(self, file, response);  

                    // Reload blank page, so that reloading main page
                    // does not re-submit the post. Also, remember to
                    // delete the frame
                    toDeleteFlag = true;  

                    // Fix IE mixed content issue
                    iframe.src = "javascript:‘<html></html>‘;";
                });
            },
            /**
             * Upload file contained in this._input
             */
            submit: function () {
                var self = this,
                    settings = this._settings;  

                if (!this._input || this._input.value === ‘‘) {
                    return;
                }  

                var file = fileFromPath(this._input.value);  

                // user returned false to cancel upload
                if (false === settings.onSubmit.call(this, file, getExt(file))) {
                    this._clearInput();
                    return;
                }  

                // sending request
                var iframe = this._createIframe();
                var form = this._createForm(iframe);  

                // assuming following structure
                // div -> input type=‘file‘
                removeNode(this._input.parentNode);
                removeClass(self._button, self._settings.hoverClass);  

                form.appendChild(this._input);  

                form.submit();  

                // request set, clean up
                removeNode(form);
                form = null;
                removeNode(this._input);
                this._input = null;  

                // Get response from iframe and fire onComplete event when ready
                this._getResponse(iframe, file);  

                // get ready for next request
                this._createInput();
            }
        };
    })();
时间: 2024-10-11 04:28:43

AjaxUpLoad.js使用实现文件上传的相关文章

JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作.这次需要实现将本地打包好的文件上传至阿里云服务器.使用前面的图片文件上传方法无法完成此操作.操作界面如下: 思路 本地与服务端传输文件的格式应该是熟悉的Base64格式.首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件. 源码解析 控制器 /

js+php实现文件上传显示文件上传进度条的插件

文件上传利器SWFUpload使用指南(swfupload官网) 上传文件显示进度条效果的插件swfupload.js

js实现图片文件上传的心得

今天研究一下图片上存的一个实现方法,由于上周没写技术周记,这次一定要写好! 那么问题来了:PHP处理图片上传时要求JQ实现数据的交互,怎么办? 这里涉及到的一个logo上传的需求,根据radio选择是否更新logo,同时form表单将以js事件处理 <div class="comLogo sbox"> <div class="CLheader">公司logo:</div> <div class="ui-imgsel

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify.com/,进入官网首页(不截图了,其实也没啥看的),可以看到uploadify的标语"Upload files like magic",意思是说使用uploadify上传文件如魔法一般.目前一共分为两个版本,Flash版和HTML5版,不过HTML5版是收费的,如图: 这里我们下载Flas

node.js框架express文件上传操作

1.创建upload.html文件 <form action='/upload' method='post' enctype='multipart/form-data'> 头像:<input type='file' name='userImg'/><br/> <input type='submit' value='上传头像'/> <!-- 使用file上传图片的注意事项: 1. method上传方式必须是post 2. enctype='multipa

js动态添加文件上传框

页面元素添加为 <tr id="att" style="display:none;"> <td style="text-align:right;">附件文件:</td> <td> <div id="div_fujian"> <div class="input-outer"><input type="file"

ajaxfileupload.js支持多文件上传【转载】

//修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(newElement); //jQuery(oldElement).appendTo(form); //修改前代码------- //修改后代

通用的js异步ajax文件上传函数

无需表单,直接加点击事件即可, caseimg为input表单,image为图片显示 function upimage() { $('#form-upload').remove(); $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file"

ajaxFileUpload.js插件支持多文件上传的方法

前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(newEle