dropzone.js

dropzone.js常用代码模板

    //上传附件
    $(".uploadmodal").dropzone({
      url: "/commentactivitiController/insertjpa",
      paramName: "file",//name重命名
      //autoProcessQueue: false,//是否自动提交
      addRemoveLinks: true,
      dictRemoveLinks: "x",
      dictCancelUpload: "x",
      maxFiles: 50,
      maxFilesize: 50,
      acceptedFiles: ".xlsx,.xls,doc,docx",
      init: function() {
//        myDropzone = this; // closure
//        $('#modal-btn').click(function(){
//            myDropzone.processQueue();//如果给autoProcessQueue设置为false则需要触发该方法
//        })

//往下的方法都是注册监听器
          this.on("sending", function(file, xhr, formData){
              formData.append("filename", file.name)
          })
          
//在这里的代码是将上传的图片插入隐藏的input里边，并且添加为ids[x]的形式提交到表单中
//dropzone本身似乎有自己的方法提交这种隐藏的字段，但是时间问题没有找到，只能通过这种手动插入的方式添加
          this.on("success", function(file) {
              //console.log(file.xhr.response);//这里是后台返回的数据
              var fileid = JSON.parse(file.xhr.response)
              var inp = ""
              imgNum++
              $('#fileimgid').append(inp)
          });
          this.on("addedfile", function(file){
             // console.log(file)
          });
          this.on("removedfile", function(file) {
              //console.log(file.xhr.response);
              var rfileid = JSON.parse(file.xhr.response)
              imgNum--;
            var deleteIndexName = $('#fileimgid').find("input[value='"+rfileid.id+"']").attr("name");
            //当前图片列表中的最后一位的value值
            var lastIndexVal = $('#fileimgid').find("input[name='jpaId["+imgNum+"]']").val()
            //将最后一位的value值插入到被删除的位置上
            var inp = ""
            $('#fileimgid').append(inp)
            //删除相应的表单值
            $('#fileimgid').find("input[value='"+rfileid.id+"']").remove()
            $('#fileimgid').find("input[name='jpaId["+imgNum+"]']").remove()
          });
      }
  });