• dropzone手动上传


    html:

    <div class="field">
      <div id="file" class="dropzone">
        <div class="dz-message needsclick">
          <font><font>Drop files here or click to upload.</font></font><br>
          <span class="note needsclick">(Select the files you want to upload.)</span>
        </div>
      </div>
    </div>

    css:

    .field{
      max-720px;
      margin:0 auto;
      margin-top:60px;
      font-size:20px;
      .dropzone{
        padding: 54px 54px;
        .dz-message{
          height:84px;
          font{
            line-height:28px;
          }
          span.note{
            height:28px;
            margin-top:28px;
            font-size:15px;
          }
    
        }
      }
    }

    js:

    Dropzone.autoDiscover = false; 
    var dropz = new Dropzone("#file", {
         url: "uploadFile", //上传文件的接口
       parallelUploads:10,//并行处理多少个文件上传
       uploadMultiple:true,//允许dropzone一次提交多个文件
       maxFiles: 10,//最大可上传的文件个数 
       maxFilesize: 10,//MB 
       acceptedFiles: ".csv", //可接受的文件类型
       success:function(file,data){ 
         //    console.log(this.getAcceptedFiles().length);//获取上传的文件总数 
         data=JSON.parse(data);
         if(data.code=='000'){
          //成功
         }else{
         }
       }, 
       dictMaxFilesExceeded:"文件数量过多", 
       dictDefaultMessage:"Drop files here or click to upload.", 
       dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb,当前文件大小为{{filesize}}Mb ", 
    })

    官网地址:http://www.dropzonejs.com/

    dropzone需要注意的一点就是:

      打开文件的那一刻,就已经开始上传了。

    这样的话,就会存在一个问题,一旦我们需要上传的是多个文件,而在我们选择文件的时候漏掉了文件,那么之前的文件已经上传,现在再次添加遗漏的文件,就会再次调用接口。

    这样可能我们就需要一个手动上传,即:打开文件的时候,阻止自动上传,当全部的文件已经添加成功以后,再手动按上传按钮。

    html:

    <div class="field">
      <div id="file" class="dropzone">
        <div class="dz-message needsclick">
          <font><font>Drop files here or click to upload.</font></font><br>
          <span class="note needsclick">(Select the files you want to upload.)</span>
        </div>
      </div>
    </div>
    <button class="button" disabled="true">上传</button>

    js:

    Dropzone.autoDiscover = false; 
    var dropz = new Dropzone("#file", { 
      url: "uploadFile", 
      //    addRemoveLinks: true, 
      parallelUploads:10,//并行处理多少个文件上传
      uploadMultiple:true,//允许dropzone一次提交多个文件
      maxFiles: 10,//最大可上传的文件个数 
      maxFilesize: 10,//MB 
      acceptedFiles: ".csv", 
      autoProcessQueue: false,//阻止自动上传
      success:function(file,data){ 
        //    console.log(this.getAcceptedFiles().length);//获取上传的文件总数 
        console.log(JSON.parse(data));
        data=JSON.parse(data);
        if(data.code=='000'){
        }else{
        }
      }, 
      dictMaxFilesExceeded:"文件数量过多", 
      dictDefaultMessage:"Drop files here or click to upload.", 
      dictFileTooBig:"可添加的最大文件大小为{{maxFilesize}}Mb,当前文件大小为{{filesize}}Mb ", 
    
    }).on('addedfile',function(file){
        $( '.button' ).removeAttr('disabled');
        $( '.button' ).bind( 'click', uploadHandle );
    });
    uploadHandle = function() {
      dropz.processQueue();//开启文件上传
      $( '.button' ).unbind( 'click', uploadHandle );
    }; 


  • 相关阅读:
    第二章:Java内存区域
    第六章:内核数据结构
    第十章:内核同步方法
    第九章:内核同步介绍
    第九章:zookeeper内部原理
    第三章:开始使用zookeeper的API
    第二章:了解zookeeper
    【观点】健康的心智是中国未来最大的生产力
    【流程管理分享】人事不分,问题不断
    为什么中国人勤劳而不富裕?为什么宋朝富裕而不强大?
  • 原文地址:https://www.cnblogs.com/rachelch/p/7373762.html
Copyright © 2020-2023  润新知