【随笔】解决无flash插件上传附件

最新推荐文章于 2023-07-23 12:23:19 发布

bloxed

最新推荐文章于 2023-07-23 12:23:19 发布

阅读量1w

点赞数 1

文章标签： uploadfilve

本文链接：https://blog.csdn.net/github_37847992/article/details/81632780

版权

在不使用UI框架，upload上传附件需要使用flash插件支持，没有flash插件，上传附件解决方案，封装公共模块调用

下载uploadfive插件：点击下载
html

<div id="cd-signup">
           <p class="fieldset">
               <label class="image-replace cd-photo1" for="signup-idimage1"></label>
               <input class="full-width has-padding has-border"
                   id="signup-idimage1" type="file" name="upload">
               <input type="hidden" name="frontSide" id="frontSide">
               <div class="hidden" id="tip-queue1"></div>
            </p>
           <--存放上传附件的盒子-->
       <div id="filelist"></div>
    </div>

javascript

    //TODO 事件  
     $("#filelist").on("click", ".glyphicon-trash", this.proxy(this._on_deletefile_click));  //删除附件事件
     this.data = {mothed:"uploadfile",user:'1'}; //来自于父组件参数，自定义
    this.attachmentIds = []; //上传成功后返回的id
    this.attachmentList = []; //上传成功后返回的json对象
    //TODO 上传附件参数扩展
    var data = {
         "tokenid": $.cookie("tokenid"),
      };
    data = $.extend(data,this.data);
    var dataString = "";
    for(item in data){
        dataString +=item + "=" +data[item] +'&';
    }
   $('#signup-idimage1').uploadifive({
       'auto' : true,  //开启自动上传
       'uploadScript' : '/sms/modify.do?'+dataString, //上传地址和参数
       'fileObjName' : 'upload',
       'buttonText' : '上传附件', //按钮渲染文本
       'queueID' : 'tip-queue1', //上传附件展示列表，可定义【自定义div--filelist】
       'fileType' : '.', //上传附件类型
       'multi' : true,  //多个附件

       'fileSizeLimit'   : 5242880,
       'uploadLimit' : 10, //限制数量
       'queueSizeLimit'  : 10,
       'onUploadComplete' : this.proxy(function(file, data) {   //上传完成时操作
           var response =typeof data == 'string' ?  JSON.parse(data) : data;
           if (response.success ==false) {
               alert("系统异常！");
           } else {
               $("#frontSide").val(response.img); //隐藏域
               if(response.data && response.data.aaData && response.data.aaData.length > 0){ //里面属于业务模块；callAttachments方法返回父组件Id和附件对象；供父组件调用
                this.attachmentIds = [];
                this.attachmentList = [];
                this.attachmentList.push(response.data.aaData[0]);
                this.attachmentIds.push(response.data.aaData[0].id);
                this.callAttachments({
                    attachmentList:this.attachmentList[0],
                    attachmentId:this.attachmentIds[0]
                })
                //渲染附件
                $.each(response.data.aaData, function(idx, file) {
                    $("<div fileId=" +file.id+"><a  href='javascript:;'>" + file.fileName + "</a><span fileId=" +file.id+" class='glyphicon glyphicon-trash' style='cursor:pointer;margin-left:10px'></span></div>").appendTo($("#filelist")).data("fileid", file.id);
                 });
               }
           }
       }),
       onCancel : this.proxy(function(file) {   //取消上传时操作
          $("#frontSide").val("");
           /* 注意：取消后应重新设置uploadLimit */
           $data    = $("#signup-idimage1").data('uploadifive'),
           settings = $data.settings;
           settings.uploadLimit++;
           console.log(file.name + " 已取消上传~!");

       }),
       onFallback : function() {
           console.log("该浏览器无法使用!");
       },
       onUpload : function(file) {  //上传之前操作

       },
   });