文件上传包含( 断点续传)

文件上传

WebUploader上传组件

WebUpload 组件

异步上传文件，拖拽式上传，粘贴上传，上传进度监控，文件缩略图，甚至是大文件断点续传，大文件秒传。

下载地址: http://fex.baidu.com/webuploader/

<script type="text/javascript>

  var uniueFileFlag;

  WebUploader.Uploader.register({
     "before-send-file": "beforeSendFile",
     "before-send": "beforeSend",
     "after-send-file: "afterSendFile"
  },{
    // 时间点1: 所有分场进行上传之前调用此函数
    beforeSendFile: function(block){
      var deferred = WebUploader.Deferred();

      $.ajax({
        type: "post",
        data: {fileMd5: uniueFileFlag, chunk: block.chunk, chunkSize: block.end-block.start},
        datatype: 'json',
        success: function(data){
            if(data.exist){
               deferred.reject();
            } else {
               deferred.resolve();
            }
        }
      });

      // 1. 计算文件的唯一标记，用于断点续传和秒传
      (new WebUploader.Uploader()).md5File(file, 5*1024*1024)
         .propress(function(percentage){
            $("#" + file.id).find("div.state").text("正在获取文件信息...");
         })
         .then(function(val)){
            uniqueFileTag = val;

            $("#" + file.id).find("div.state").text("成功获取文件信息");

            // 只有文件信息获取成功，才进行下一步操作
            // deferred.resolve();
         });
         // 2. 请求后台是否保存过该文件，如果存在，则跳过该文件，实现秒传功能
         return deferred.resolve();
    },
    // 时间点2: 如果有分场上
    beforeSend: function(){
       var deferred = WebUploader.Deferred();
       this.owner.options.formData.fileMd5 = uniqueFileTag;
       deferred.resolve();


       return deferred.resolve();
    },
    afterSendFile: function(){
       // 如果分块上传完成，则通过后台合并所有分块文件
       $.ajax({
         type: "post",
         url: "" + "?action='mergeChunks'",
         data: {fileMd5: uniqueFileTag},
         success: function(){
         }
       })
    }
  });
  // 1. 初始化上传功能
  var upload = WebUploader.create({
    // flash的地址 
    swf: "/js/Uploader.swf",
    // 设置提交的服务地址(REST地址)
    server: "",
    // 页面上元素ID
    pick: "#filePicker",
    // 自动上传
    auto: true,
    // 开启拖拽功能，指定拖拽区域
    dnd: "#dndArea",
    // 禁用页面其他地方的拖拽功能，防止页面直接打开文件
    disableGlobalDnd: true,
    // 开启粘贴功能
    paste: "#upload"


    // 需要后台支持部分
    // 分块上传
    // 是否分块上传
    chunked:true,
    // 每块文件大小(默认5M)
    chunkize: 5*1024*1024,
    // 

    // 
  });

  // 2. 选择文件后，文件信息队列显示
  // file: 代表哪个文件
  upload.on('fileQueued', function(file){
     // 把文件的信息显示出来
     $("fileList").append("<div id=" + file.id + "><img/><span>" + file.name + "</span><span class='state'></span></div>");

     // 制作缩略图
     // error: 制造缩略图失败
     // src: 生成后的，缩略图的路径
     uploader.makeThumb(file, function(error, src){
         // 判断是否已经成功生成缩略图
         if(error){
            $("#" + file.id).find("img").replaceWith("无法预览");
         } else {
            $('#" + file.id).find("img).attr("src", src);           
         } 
     });
  });

  // 3. 注册上传进度条
  // percentage: 代表上传的时候文件的百分比 0.15 1
  upload.on('uploadProgress', function(file, percentage){
     //    
     $("#" + file.id).find("span.percentage").text(Math.round(percentage*100) + '%');            
  });



  upload.

</script>

分块上传后台支持思路

[监听分块上传的三个时间点方法，实现分块上传]

1. before-send-file: 该方法在文件上传前调用。
2. send-file: 每一个分块
3. after-send-file: 所有分块完成之后调用该方法