码迷,mamicode.com
首页 > Web开发 > 详细

dropzone.js重写断点续传功能

时间:2017-08-21 16:32:00      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:js


js文件:

var uploaddropzone = new Dropzone("#uploaddropzone",{

url: ctx + "/slider/fileUploadContinue",

acceptedFiles: "",

maxFiles: 1,

autoDiscover : false,

addRemoveLinks: true,

dictRemoveFile: ‘x‘,

dictDefaultMessage: ‘Drop file here or click to upload‘,

dictInvalidFileType: "你不能上传该类型文件,文件类型只能是",

thumbnailHeight:100,

thumbnailWidth:256,

customUpload: function(files,xhr){  // 重写了 dropzone.js  源码,  主要功能是在dropzone发送文件请求的时候进行拦截,以另一种方式进行.

var file=files[0];

fileUploadCheckAjax(file,xhr);//file 需要上传的文件,xhr  监听事件

},

init:function(){

this.on("addedfile", function(file) {

$("#uploadChoose").attr("disabled",true);

});

this.on("success", function(file) {

$("#fileResource").html(file.xhr.responseText);

$("#uploadChoose").attr("disabled",false);


});

this.on("complete", function(data) {

          if(data.status == "error"){

          promptPop("warning","上传失败");

          }

});

}

});

function fileUploadCheckAjax(file,xhr){ 

xhr.onreadystatechange = function() {//上传状态监听 xhr.responseText 返回值,由 后台提供

console.log(xhr.readyState + "-" + xhr.status + "-" + xhr.responseText);

if (xhr.readyState == 4 && xhr.status == 200) {

if(xhr.responseText=="error"){

alert(‘失败‘);

}else{

alert(‘成功‘);

}

}

};

var load=0;//上传进度百分比

var param = "fileName=" + file.name + "&fileSize=" + file.size + "&fileType="

+ file.type + "&fileLastModified=" + file.lastModified; //文件信息

var xhrCheck = new XMLHttpRequest();//检查请求 第二个监听 主要监听文件的上传情况

xhrCheck.onreadystatechange = function() {//检查状态监听,成功后执行发送上传请求

if (xhrCheck.status == 200 && xhrCheck.readyState == 4) {

load = parseInt(xhrCheck.responseText);

xhr.open("POST", ctx+"/slider/fileUploadContinue?" + param, true);//上传文件方法实现

xhr.send(file.slice(load, file.size, file.type));//通过File.slice方法获得未上传过的数据信息,再上传(重点)

xhr.upload.uploadprogress = function(e) {//上传进度监听

this.emit("uploadprogress", file, 100, file.upload.bytesSent)

};

}

};

xhrCheck.open("POST", ctx+"/slider/fileUploadCheck?" + param, true);// 监听请求地址,该方法主要返回已上传文件的大小

xhrCheck.send();//发送检查请求

}


dropzone.js 修改:


Dropzone.prototype.uploadFiles 方法,

在  return xhr.send(formData); 之前加如下代码:

 if(this.options.customUpload!=null) {

     return this.options.customUpload(files,xhr);

 }//如果定义了customUpload方法,则返回customUpload方法,否则按照原方法实现。这也就是为何要在js里面增加customUpload 的原因。

 

 java:

 fileUploadCheck方法:以上传文件的名字,类型,大小和最后修改时间来判定是否为同一个文件,在指定的临时存储的路径检索该文件并且返回该文件已上传的大小。

 

@ResponseBody

@RequestMapping(value="/fileUploadCheck",method = RequestMethod.POST)

public Long fileUploadCheck(FileVo fileVo) throws Exception {

String sysPath=this.getFileUpLoadPath("upload.file.tmp");

// 通过name、size、type、lastModified四个属性来确定文件唯一性——MD5散列值。

String fileID = EncoderByMd5(fileVo.getFileName()+fileVo.getFileSize()+ fileVo.getFileType() + fileVo.getFileLastModified());

String fileName = DateUtils.getCurrentDate("yyyyMMDD")+fileID +fileVo.getFileName().substring(fileVo.getFileName().lastIndexOf("."));

File dir = new File(sysPath);

//判断文件夹是否存在 不存在则创建

if (!dir.exists()) {

dir.mkdir();

}

File file =new File(sysPath+File.separator  + fileName);

if (!file.exists()) {

return 0l;

} else {

return  file.length();

}

}

EncoderByMd5方法:  对指定字符串进行MD5编码

public String EncoderByMd5(String str){

try {

           // 生成一个MD5加密计算摘要

           MessageDigest md = MessageDigest.getInstance("MD5");

           // 计算md5函数

           md.update(str.getBytes());

           // digest()最后确定返回md5 hash值,返回值为8为字符串。因为md5 hash值是16位的hex值,实际上就是8位的字符

           // BigInteger函数则将8位的字符串转换成16位hex值,用字符串来表示;得到字符串形式的hash值

           return new BigInteger(1, md.digest()).toString(16);

       } catch (Exception e) {

           e.printStackTrace();

           return str;

       }

}

 fileUploadContinue:方法 以复写的形式上传文件到临时路径,

 @ResponseBody

@RequestMapping(value="/fileUploadContinue",method = RequestMethod.POST)

public String fileUploadContinue(ModelMap map,HttpServletRequest request,FileVo fileVo) throws Exception {

ServletInputStream is = request.getInputStream();//输入流,由前端提供,

String sysPath=this.getFileUpLoadPath("upload.file.tmp");//系统配置的文件临时存储路径

// 通过name、size、type、lastModified四个属性来确定文件唯一性——MD5散列值。

String fileID = EncoderByMd5(fileVo.getFileName()+fileVo.getFileSize()+ fileVo.getFileType() + fileVo.getFileLastModified());

String fileName = DateUtils.getCurrentDate("yyyyMMDD")+ fileID +fileVo.getFileName().substring(fileVo.getFileName().lastIndexOf("."));

FileOutputStream os = null;

File file = null;

try {

BufferedInputStream bis = new BufferedInputStream(is);

byte[] b = new byte[1024 * 1024];

file =new File(sysPath+File.separator  + fileName);

if (!file.exists()) {

file.createNewFile();

}

os = new FileOutputStream(file, true);// append

int n = 0;

while ((n = bis.read(b)) > 0) {

os.write(b, 0, n);

}

} catch (IOException e) {

e.printStackTrace();

} finally {

try {

os.close();

is.close();

} catch (IOException e) {

e.printStackTrace();

}

}

InputStream  newIs=new FileInputStream(new File(sysPath+File.separator  + fileName)); // newIs 新的文件流

 

}

 

 

 

     


dropzone.js重写断点续传功能

标签:js

原文地址:http://tianjian.blog.51cto.com/3549910/1958028

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!