AjaxUpLoad.js怎么实现文件上传

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

图1 文件上传前

图2 文件上传后

1、创建页面并编写HTML

上传文档:

<p 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="删除" />   </p>

上传图片:

<p 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="删除" />   </p>

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 p = document.createElement('p');    return function (html) {    p.innerHTML = html;    var el = p.firstChild;    return p.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    * <p><input type='file' /></p>    */    _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 p = document.createElement("p");    addStyles(p, {    '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 (p.style.opacity !== "0") {    if (typeof(p.filters) == 'undefined') {     throw new Error('Opacity not supported by the browser');    }    p.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';       });       p.appendChild(input);    document.body.appendChild(p);       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 p = self._input.parentNode;    copyLayout(self._button, p);    p.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    // p -> 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();    }    };   })();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery怎么实现左右滑动的toggle

在Vuejs里利用index对第一项添加class的方法

以上就是AjaxUpLoad.js怎么实现文件上传的详细内容，更多内容请关注技术你好其它相关文章！