zoukankan      html  css  js  c++  java
  • plupload文件上传插件实现多个按钮

    参考 https://www.cnblogs.com/houdj/p/7002650.html

                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <input style="height:30px;" type="text" id="pictureName" value="" readonly>
                            <a href="javascript:void(0);" class="btn" id="btn">上传文件</a>
                            <input type="hidden" value="" name="" id="picture">
                        </td>
                    </tr>
    
                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <input class="" style="height:30px;" type="text" id="pictureName1" value=""  readonly>
                            <a href="javascript:void(0);" class="btn easyui-linkbutton" id="btn1">上传文件1</a>
                            <input type="hidden" value="" name="data" id="picture1">
                        </td>
                    </tr>
                    
                    
             var ids = new Array("btn","btn1");
            $.each(ids,function(i,n){
                var self = this.toString();
                //实例化一个plupload上传对象
                var uploader = new plupload.Uploader({
                    browse_button : self, //触发文件选择对话框的按钮,为那个元素id
                    url : '' ,//服务器端的上传页面地址
                    max_file_size: '3mb',//限制为2MB
                    filters: [{title: "Image files",extensions: self.search('1')==-1 ? 'gif,png,jpg,jpeg':'jpg,pdf'}]//图片限制
                });
                //在实例对象上调用init()方法进行初始化
                uploader.init();
                //绑定各种事件,并在事件监听函数中做你想做的事
                uploader.bind('FilesAdded',function(uploader,files){ //文件上传前
                    //这里我只处理一张图片
                    var flag = self.search('1');// -1 表示没找到
                    if (flag == -1 && imageFile != '') {
                        uploader.removeFile(imageFile); //删除队列中的元素
                    } else if (scanFile != '') {
                        uploader.removeFile(scanFile);
                    }
                    uploader.start();
                });
                 uploader.bind('UploadProgress',function(uploader,files){ //上传中,显示进度条
                
                });
                uploader.bind('FileUploaded',function(up,file,info){////文件上传成功的时候触发
                    console.log(up);
                    // console.log(uploader.total);
                    imageFile = file;
                    var data = JSON.parse(info.response);
                    if(data.error==0){
                        uploader.removeFile(files);
                        showMessage(data.msg);
                    }else{
                        var flag = self.search('1');// -1 表示没找到
                        console.log(flag);
                        if(flag==-1){
                        imageFile = file;
                            $("#picture").val(data.pic);
                            $("#pictureName").val(data.name);
                        }else{
                            
                            scanFile = file;
                             $("#pictureName1").val(data.name);
                            $("#picture1").val(data.pic);
                        }
                    }
                });
            });
  • 相关阅读:
    PAT《数据结构学习与实验指导》实验项目集 2-09 2-10 2-11 2-12 2-13
    codeblocks+Mingw 下配置开源c++单元测试工具 google test
    编程之美 1.16 24点游戏
    PAT 1065 1066 1067 1068
    多线程批量执行等待全部结果
    使用Git和远程代码库
    CentOS下Crontab安装使用详细说明(转)
    安装和测试Kafka(转)
    MapReduce任务参数调优(转)
    Maven构建应用程序常用配置(转)
  • 原文地址:https://www.cnblogs.com/-lin/p/11775210.html
Copyright © 2011-2022 走看看