强大的文件上传

   
      
      
      
          
          
          
          

      
          
            
  
            
  
               
对于上传按钮和选择文件按钮，你可以使用其他任何形式的元素，可以是图片或一切你能想到的东西，都是可以的
  
                  
                  
                  
                
  

                
  
                  
            
  
            
  
            
  
         

    

对应的js

/* 
    无刷新异步上传插件 
    2017-12-20 Jbone Created 
*/  
(function ($) {  
    var defaultSettings = {  
        url: "",                                 //上传地址  
        buttonFeature: true,                    //true:点击按钮时仅选择文件； false:选择完文件后立即上传  
        fileSuffixs: ["jpg", "png"],             //允许上传的文件后缀名列表  
        errorText: "不能上传后缀为 {0} 的文件！", //错误提示文本，其中{0}将会被上传文件的后缀名替换  
        onCheckUpload: function (text) { //上传时检查文件后缀名不包含在fileSuffixs属性中时触发的回调函数，(text为错误提示文本)  
            alert(text);  
        },  
        onComplete: function (msg) { //上传完成后的回调函数[不管成功或失败，它都将被触发](msg为服务端的返回字符串)  
        },  
        onAllComplete: function () {  
        },//全部文件上传完成触发的事件  

        onChosen: function (file, obj, fileSize, errorText) { //选择文件后的回调函数，(file为选中文件的本地路径;obj为当前的上传控件实例;fileSize为当前文件的大小,errorText为获取文件大小时的错误提示文本)  
            //alert(file);  
            return true;//在此回调中返回false将取消当前选择的文件  
        },  
        maximumFilesUpload: 5,//最大文件选择数(当此属性大于1时，buttonFeature属性只能为true)  
        submitFilesNum: 3,//最大提交上传数（当触发submitUpload方法时，文件上传的个数）  
        onSubmitHandle: function (uploadFileNumber) { //提交上传时的回调函数，uploadFileNumber为当前上传的文件数量  
            //在此回调中返回false上传提交将被阻止  
            return true;  
        },  
        onSameFilesHandle: function (file) { //当重复选择相同的文件时触发  
            //在此回调中返回false当前选择的文件将从上传队列中取消  
            return true;  
        },  
        isGetFileSize: false,//是否获取文件大小，默认为false  

        isSaveErrorFile: true,//是否保存上传失败的文件，默认true  

        perviewElementId: "",//用于预览的元素id（请传入一个div元素的id）  

        perviewImgStyle: null//用于设置图片预览时的样式（可不设置，在不设置的情况下多文件上传时只能显示一张图片），如{ width: '100px', height: '100px', border: '1px solid #ebebeb' }  
    };  

    $.fn.uploadFile = function (settings) {  

        settings = $.extend({}, defaultSettings, settings || {});  

        if (settings.perviewElementId) {  
            //设置图片预览元素的必须样式  
            if (!settings.perviewImgStyle) {  
                var perviewImg = document.getElementById(settings.perviewElementId);  
                perviewImg.style.overflow = "hidden";  
            }  
        }  

        return this.each(function () {  
            var self = $(this);  

            var upload = new UploadAssist(settings);  

            upload.createIframe(this);  

            //绑定当前按钮点击事件  
            self.bind("click", function (e) {  
                upload.chooseFile();  
            });  

            //将上传辅助类的实例，存放到当前对象中，方便外部获取  
            self.data("uploadFileData", upload);  


        });  
    };  
})(jQuery);  

//上传辅助类  
function UploadAssist(settings) {  
    //保存设置  
    this.settings = settings;  
    //已选择文件的路径集合  
    this.choseFilePath = [];  
    //上传错误文件集合  
    this.uploadError = [];  
    //创建的iframe唯一名称  
    this.iframeName = "upload" + this.getTimestamp();  
    //提交状态  
    this.submitStatus = true;  
    //已经上传的文件数  
    this.uploadFilesNum = 0;  
    //上传完成计数  
    this.uploadNum = 0;  
    //针对IE上传获取文件大小时的错误提示文本  
    this.errorText = "请设置浏览器一些参数后再上传文件，方法如下（设置一次即可）：\n请依次点击浏览器菜单中的\n'工具->Internet选项->安全->可信站点->自定义级别'\n在弹出的自定义级别窗口中找到 'ActiveX控件和插件' 项，将下面的子项全部选为 '启用' 后，点击确定。\n此时不要关闭当前窗口，再点击 '站点' 按钮，在弹出的窗口中将下面复选框的 '√' 去掉，然后点击 '添加' 按钮并关闭当前窗口。\n最后一路 '确定' 完成并刷新当前页面。";  
    return this;  
}  

UploadAssist.prototype = {  
    //辅助类构造器  
    constructor: UploadAssist,  

    //创建iframe  
    createIframe: function (/*插件中指定的dom对象*/elem) {  

        var html = ""  
                + ""  
                + ""  
                + "