• jQuery上传插件Uploadify 3.2使用


    Uploadify下载地址:http://www.uploadify.com/download/ 这里下载最新版的3.2的。
    下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。
    在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如:

    $(function() {

        $("#file_upload_1").uploadify({
            height        : 30,
            swf           : '/uploadify/uploadify.swf',
            uploader      : '/uploadify/uploadify.php',
            width         : 120
        });
    });

    file_upload_1其实也就是一个容器ID,比如上面的只是简单的事例,下面我就把我在项目中做的发出来,每个都有解释:

    $(document).ready(function() {
        $("#file_upload").uploadify({
            //开启调试
            'debug' : false,
            //是否自动上传
            'auto':false,
            //超时时间
            'successTimeout':99999,
            //附带值
            'formData':{
                'userid':'用户id',
                'username':'用户名',
                'rnd':'加密密文'
            },
            //flash
            'swf': "uploadify.swf",
            //不执行默认的onSelect事件
            'overrideEvents' : ['onDialogClose'],
            //文件选择后的容器ID
            'queueID':'uploadfileQueue',
            //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
            'fileObjName':'upload',
            //上传处理程序
            'uploader':'imageUpload.php',
            //浏览按钮的背景图片路径
            'buttonImage':'upbutton.gif',
            //浏览按钮的宽度
            'width':'100',
            //浏览按钮的高度
            'height':'32',
            //expressInstall.swf文件的路径。
            'expressInstall':'expressInstall.swf',
            //在浏览窗口底部的文件类型下拉菜单中显示的文本
            'fileTypeDesc':'支持的格式:',
            //允许上传的文件后缀
            'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
            //上传文件的大小限制
            'fileSizeLimit':'3MB',
            //上传数量
            'queueSizeLimit' : 25,
            //每次更新上载的文件的进展
            'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                 //有时候上传进度什么想自己个性化控制,可以利用这个方法
                 //使用方法见官方说明
            },
            //选择上传文件后调用
            'onSelect' : function(file) {
                      
            },
            //返回一个错误,选择文件的时候触发
            'onSelectError':function(file, errorCode, errorMsg){
                switch(errorCode) {
                    case -100:注意修改提示信息应该是用this.queueData.errorMsg =,如果用alert就会有两个弹框
                        //alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");
                        break;
                    case -110:
                        alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
                        break;
                    case -120:
                        alert("文件 ["+file.name+"] 大小异常!");
                        break;
                    case -130:
                        alert("文件 ["+file.name+"] 类型不正确!");
                        break;
    }
                 
    switch(errorCode) {
                        case -100:
                            this.queueData.errorMsg = "上传的文件数量已经超出系统限制的" + $('#photofile').uploadify('settings', 'queueSizeLimit') + "个文件!";
                            break;
                        case -110:
                            this.queueData.errorMsg = "文件 [" + file.name + "] 大小超出系统限制的" + $('#photofile').uploadify('settings', 'fileSizeLimit') + "大小!";
                            break;
                        case -120:
                            this.queueData.errorMsg = "文件 [" + file.name + "] 大小异常!";
                            break;
                        case -130:
                            this.queueData.errorMsg = "文件 [" + file.name + "] 类型不正确!";
                            break;           
     }
    如果上面的提示还是有英文的话可以使用下面的方法
    switch (errorCode) {
                        case -100:
                            this.queueData.errorMsg = "上传的文件数量已经超出系统限制的" + $('#photofile').uploadify('settings', 'queueSizeLimit') + "个文件!";
                            break;
                        case -110:
                            this.queueData.errorMsg = "文件 [" + file.name + "] 大小超出系统限制的" + $('#photofile').uploadify('settings', 'fileSizeLimit') + "大小!";
                            break;
                        case -120:
                            this.queueData.errorMsg = "文件 [" + file.name + "] 大小异常!";
                            break;
                        case -130:
                            this.queueData.errorMsg = "文件 [" + file.name + "] 类型不正确!";
                            break;
                    }
    
    
    
            },
            //检测FLASH失败调用
            'onFallback':function(){
                alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
            },
            //上传到服务器,服务器返回相应信息到data里
            'onUploadSuccess':function(file, data, response){
                alert(data);
            }
        });
    });
    js代码及解释
  • 相关阅读:
    vue-router 动态路由匹配
    vue-router $route
    vuex mapActions
    vuex mapMutations 使用
    ES6 动态计算属性名
    vuex Payload 荷载
    vuex mapGetters
    vuex mapState使用
    Vue 引入ElementUI 2.0.11:依赖未发现的问题
    vuex 深入理解
  • 原文地址:https://www.cnblogs.com/bolanbujing/p/4289887.html
Copyright © 2020-2023  润新知