dropzone.js重写断点续传功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dropzone.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重写断点续传功能的主要内容，如果未能解决你的问题，请参考以下文章