强大的文件上传

   
      
      
      
        files upload  
          
          
          

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

对应的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 = ""  
                + ""  
                + "upload"  
                + "
                    
                    

你可能感兴趣的:(强大的文件上传)