dropzone.js重寫斷點續傳功能

標籤：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重寫斷點續傳功能