|
var j$ = jQuery.noConflict();
|
var filesList = [];
|
var Base64 = {};
|
j$(document).ready(function() {
|
|
//Event listener for click of Upload button
|
j$("#uploadButton").click(function(){
|
prepareFileUploads();
|
removeClick();
|
});
|
|
//Event listener to clear upload details/status bars once upload is complete
|
// j$("#clear").on('click',function(){
|
// j$(".upload").remove();
|
// });
|
|
//Event listener for click of Upload button
|
j$("#removeFile").click(function(){
|
deleteFile();
|
});
|
removeNoClick();
|
});
|
|
var fileSize = 0; //判断需要上传的文件数量
|
var contrast = 0; //判断执行的文件数量
|
var bool = 'false'; //是否调用batch
|
var byteChunkArray;
|
var files;
|
var currentFile;
|
var $upload;
|
var CHUNK_SIZE = 180000; //Must be evenly divisible by 3, if not, data corruption will occur
|
var VIEW_URL = '/servlet/servlet.FileDownload?file=';
|
var fileLength = 0;
|
//var parentId, you will see this variable used below but it is set in the component as this is a dynamic value passed in by component attribute
|
|
function removeNoClick(){
|
j$("#removeFile").css("pointer-events", "none").css("cursor", "default").css("opacity", "0.6");
|
}
|
|
function removeClick(){
|
j$("#removeFile").css("pointer-events", "").css("cursor", "").css("opacity", "");
|
}
|
|
function deleteFile(){
|
var files = j$('input[type="checkbox"]:checked');
|
var filesIdStr = '';
|
for(var i = 0 ; i < files.length ; i++){
|
if(files[i].value != '' && files[i].checked)
|
filesIdStr += ',' + files[i].value;
|
}
|
filesIdStr = filesIdStr.substring(1);
|
console.log('filesIdStr = ' + filesIdStr);
|
BatchFileUploadController.deleteFile(filesIdStr,function(result,event){
|
console.log('result = ' + JSON.stringify(result));
|
if(result.status == 'success'){
|
for(var i = 0 ; i < files.length ; i++){
|
if(files[i].value != '' && files[i].checked){
|
files[i].nextSibling.children[3].children[2].children[0].innerHTML = '已删除该文件';
|
files[i].checked = false;
|
files[i].hidden = true;
|
}
|
}
|
//去AWS删除文件
|
AWSService.post(staticResource.deleteUrl,JSON.stringify(result.keyList),function(result){
|
console.log('result = ' + JSON.stringify(result))
|
},staticResource.token)
|
}else{
|
alert('删除失败 : ' + result.message);
|
}
|
});
|
}
|
//Executes when start Upload button is selected
|
function prepareFileUploads(){
|
//Get the file(s) from the input field
|
files = document.getElementById('filesInput').files;
|
|
//Only proceed if there are files selected
|
if(files.length == 0){
|
alert('Please select a file!');
|
return; //end function
|
}
|
|
//Disable inputs and buttons during the upload process
|
j$(".uploadBox input").attr("disabled", "disabled");
|
j$(".uploadBox button").attr({
|
disabled: "disabled",
|
class: "btnDisabled"
|
});
|
|
//Build out the upload divs for each file selected
|
var uploadMarkup = '';
|
for(i = 0; i < files.length; i++){
|
//Determine file display size
|
if(files[i].size < 1000000){
|
var displaySize = Math.floor(files[i].size/1000) + 'K';
|
}else{
|
var displaySize = Math.round((files[i].size / 1000000)*10)/10 + 'MB';
|
}
|
|
//For each file being uploaded create a div to represent that file, includes file size, status bar, etc. data-Status tracks status of upload
|
|
uploadMarkup += '<input type="checkbox" name="interest" style="float:left;margin-top:30px" value="" class="checkbox">';
|
uploadMarkup += '<div class="upload" style="margin-top:20px;width:90%;margin-left:5%;" data-status="pending" data-index="'+(i+fileLength)+'">'; //index used to correspond these upload boxes to records in the files array
|
uploadMarkup += '<div class="fileName"><span class="name">'+ files[i].name + '</span> - '+ displaySize+ '</div>';
|
uploadMarkup += '<div class="percentComplete">0%</div>'
|
uploadMarkup += '<div class="clear"/>';
|
uploadMarkup += '<div class="statusBar">';
|
uploadMarkup += '<div class="statusBarPercent"/>';
|
uploadMarkup += '<br><div class="errorMsgDiv" style="margin-top:5px"><span class="errorMsg" style="color:red;margin-top:5px">'+'</span>'+'</div>';
|
uploadMarkup += '</div>';
|
uploadMarkup += '</div>';
|
|
|
}
|
|
//Add markup to the upload box
|
j$('.uploadBox').append(uploadMarkup);
|
|
//初始化
|
fileSize = 0;
|
contrast = 0;
|
bool = 'false';
|
//判断文件名与格式是否符合规则
|
for(i = 0; i < files.length; i++){
|
if(files[i].name.indexOf(' ') >= 0){
|
var $up = j$(".upload[data-index='"+(i+fileLength)+"']");
|
$up.prev().hide();
|
$up.first().attr('data-status','complete');
|
$up.first().addClass('uploadError');
|
$up.first().find(".statusPercent").addClass('statusPercentError');
|
$up.first().attr('title','不能上传有空格的文件');
|
j$(".upload[data-index='"+(i+fileLength)+"'] .errorMsg").text('不能上传有空格的文件');
|
//$upload.prev().css("disabled","disabled");
|
}else if(files[i].size > 15 *1024 *1024){
|
var $up = j$(".upload[data-index='"+(i+fileLength)+"']");
|
$up.prev().hide();
|
$up = j$(".upload[data-index='"+(i+fileLength)+"']");
|
$up.first().attr('data-status','complete');
|
$up.first().addClass('uploadError');
|
$up.first().find(".statusPercent").addClass('statusPercentError');
|
$up.first().attr('title','单个文件上传不能超过15M');
|
j$(".upload[data-index='"+(i+fileLength)+"'] .errorMsg").text('单个文件上传不能超过15M');
|
}else{
|
fileSize++;
|
}
|
}
|
console.log('fileSize = ' + fileSize);
|
fileLength += files.length;
|
|
//Once elements have been added to the page representing the uploads, start the actual upload process
|
checkForUploads();
|
}
|
|
function checkForUploads(){
|
//Get div of the first matching upload element that is 'pending', if none, all uploads are complete
|
//$upload = j$(".upload:first[data-status='pending']");
|
$upload = j$(".upload[data-status='pending']").first();
|
if($upload.length != 0){
|
//Based on index of the div, get correct file from files array
|
currentFile = files[($upload.attr('data-index') - fileLength + files.length)];
|
|
/*Build the byteChunkArray array for the current file we are processing. This array is formatted as:
|
['0-179999','180000-359999',etc] and represents the chunks of bytes that will be uploaded individually.*/
|
byteChunkArray = new Array();
|
|
//First check to see if file size is less than the chunk size, if so first and only chunk is entire size of file
|
if(currentFile.size <= CHUNK_SIZE){
|
byteChunkArray[0] = '0-' + (currentFile.size - 1);
|
}else{
|
//Determine how many whole byte chunks make up the file,
|
var numOfFullChunks = Math.floor(currentFile.size / CHUNK_SIZE); //i.e. 1.2MB file would be 1000000 / CHUNK_SIZE
|
var remainderBytes = currentFile.size % CHUNK_SIZE; // would determine remainder of 1200000 bytes that is not a full chunk
|
var startByte = 0;
|
var endByte = CHUNK_SIZE - 1;
|
|
//Loop through the number of full chunks and build the byteChunkArray array
|
for(i = 0; i < numOfFullChunks; i++){
|
byteChunkArray[i] = startByte+'-'+endByte;
|
|
//Set new start and stop bytes for next iteration of loop
|
startByte = endByte + 1;
|
endByte += CHUNK_SIZE;
|
}
|
|
//Add the last chunk of remaining bytes to the byteChunkArray
|
startByte = currentFile.size - remainderBytes;
|
endByte = currentFile.size;
|
byteChunkArray.push(startByte+'-'+endByte);
|
}
|
|
//Start processing the byteChunkArray for the current file, parameter is '' because this is the first chunk being uploaded and there is no attachment Id
|
processByteChunkArray('');
|
|
}else{
|
//All uploads completed, enable the input and buttons
|
j$(".uploadBox input").removeAttr("disabled");
|
j$(".uploadBox button").removeAttr("disabled").attr("class","btn");
|
|
/*Remove the browse input element and replace it, this essentially removes
|
the selected files and helps prevent duplicate uploads*/
|
j$("#filesInput").replaceWith('<input type="file" name="file" multiple="true" id="filesInput">');
|
}
|
}
|
|
function processByteChunkArray(){
|
try{
|
//Proceed if there are still values in the byteChunkArray, if none, all piece of the file have been uploaded
|
console.log('byteChunkArray.length = ' + byteChunkArray.length);
|
if(byteChunkArray.length > 0){
|
//Determine the byte range that needs to uploaded, if byteChunkArray is like... ['0-179999','180000-359999']
|
console.log('byteChunkArray[0] = ' + byteChunkArray[0]);
|
var indexes = byteChunkArray[0].split('-'); //... get the first index range '0-179999' -> ['0','179999']
|
var startByte = parseInt(indexes[0]); //0
|
var stopByte = parseInt(indexes[1]); //179999
|
|
//Slice the part of the file we want to upload, currentFile variable is set in checkForUploads() method that is called before this method
|
if(currentFile.slice){
|
var blobChunk = currentFile.slice(startByte , stopByte + 1);
|
}else if (currentFile.mozSlice) {
|
var blobChunk = currentFile.mozSlice(startByte , stopByte + 1);
|
}
|
console.log('stopByte = ' + stopByte);
|
console.log('currentFile.size = ' + currentFile.size);
|
//Update the percent of the status bar and percent, first determine percent complete
|
if(stopByte + 1 >= currentFile.size){
|
debugger
|
contrast++;
|
console.log('contrast = ' + contrast);
|
if(contrast >= fileSize){
|
bool = 'true';
|
}
|
console.log('bool = ' + bool);
|
//Create a new reader object, part of HTML5 File API
|
var reader = new FileReader();
|
blobChunk = currentFile.slice(0 , stopByte + 1);
|
//Read the blobChunk as a binary string, reader.onloadend function below is automatically called after this line
|
reader.readAsDataURL(blobChunk);
|
|
//Create a reader.onload function, this will execute immediately after reader.readAsBinaryString() function above;
|
reader.onloadend = function(evt){
|
if(evt.target.readyState == FileReader.DONE){ //Make sure read was successful, DONE == 2
|
//Base 64 encode the data for transmission to the server with JS remoting, window.btoa currently on support by some browsers
|
//var base64value = window.btoa(evt.target.result);
|
var base64value = evt.target.result;
|
Base64.file = base64value;
|
Base64.fileName = currentFile.name;
|
Base64.size = currentFile.size;
|
filesList = [];
|
filesList.push(Base64);
|
AWSService.post(newUrl, JSON.stringify(filesList), function(result){
|
result = JSON.parse(JSON.stringify(result));
|
if(result.status == '0'){
|
//Use js remoting to send the base64 encoded chunk for uploading
|
let key = result.object[0];
|
let transId = result.txId;
|
BatchFileUploadController.saveFile(currentFile.name,key,transId,parentId,bool,function(result,event){
|
//Proceed if there were no errors with the remoting call
|
if(result.status == 'success'){
|
//执行trans方法，进行确认成功
|
trans(currentFile.name,transId,1);
|
//Update the percent of the status bar and percent, first determine percent complete
|
var percentComplete = Math.round((stopByte / currentFile.size) * 100);
|
$upload.find(".percentComplete").text(percentComplete + '%');
|
$upload.find(".statusBarPercent").css('width',percentComplete + '%');
|
|
//Remove the index information from the byteChunkArray array for the piece just uploaded.
|
byteChunkArray.shift(); //removes 0 index
|
|
//Call process byteChunkArray to upload the next piece of the file
|
$upload.prev().val(result.recordId);
|
processByteChunkArray();
|
}else{
|
//执行trans方法，进行确认失败
|
trans(currentFile.name,transId,0);
|
|
//If script is here something broke on the JavasSript remoting call
|
//Add classes to reflect error
|
$upload.attr('data-status','complete');
|
$upload.addClass('uploadError');
|
$upload.find(".statusPercent").addClass('statusPercentError');
|
$upload.attr('title',result.message);
|
$upload.find(".errorMsg").text(result.message);
|
$upload.find(".percentComplete").text(0 + '%');
|
$upload.find(".statusBarPercent").css('width',0 + '%');
|
$upload.prev().hide();
|
//Check and continue the next file to upload
|
checkForUploads();
|
}
|
});
|
}else{
|
$upload.attr('data-status','complete');
|
$upload.addClass('uploadError');
|
$upload.find(".statusPercent").addClass('statusPercentError');
|
$upload.attr('title',result.message);
|
$upload.find(".errorMsg").text(result.message);
|
$upload.find(".percentComplete").text(0 + '%');
|
$upload.find(".statusBarPercent").css('width',0 + '%');
|
$upload.prev().hide();
|
checkForUploads();
|
}
|
}, staticResource.token,function(error){
|
//alert('AWS文件上传出现错误,请刷新页面重试');
|
$upload.attr('data-status','complete');
|
$upload.addClass('uploadError');
|
$upload.find(".statusPercent").addClass('statusPercentError');
|
$upload.attr('title','AWS文件上传出现错误,请重新上传该文件');
|
$upload.find(".errorMsg").text('AWS文件上传出现错误,请重新上传该文件');
|
$upload.find(".percentComplete").text(0 + '%');
|
$upload.find(".statusBarPercent").css('width',0 + '%');
|
$upload.prev().hide();
|
checkForUploads();
|
});
|
}else{
|
//Error handling for bad read
|
alert('Could not read file');
|
}
|
};
|
}else{
|
var percentComplete = Math.round((stopByte / currentFile.size) * 100);
|
$upload.find(".percentComplete").text(percentComplete + '%');
|
$upload.find(".statusBarPercent").css('width',percentComplete + '%');
|
//Remove the index information from the byteChunkArray array for the piece just uploaded.
|
byteChunkArray.shift(); //removes 0 index
|
|
//Call process byteChunkArray to upload the next piece of the file
|
processByteChunkArray();
|
}
|
}else{
|
//This file has completed, all byte chunks have been uploaded, set status on the div to complete
|
$upload.attr('data-status','complete');
|
|
//Change name of file to link of uploaded attachment
|
//$upload.find(".name").html('<a href="' + VIEW_URL + attachmentId + '" target="_blank">'+currentFile.name+'</a>');
|
//Call the checkForUploads to find the next upload div that has data-status="incomplete" and start the upload process.
|
checkForUploads();
|
}
|
}catch(err){
|
alert('发送错误' + err.message + '请刷新页面');
|
}
|
|
}
|
|
|
function trans(fileName,txId,isSuccess){
|
let transParameters = {
|
txId: txId,
|
isSuccess: isSuccess
|
};
|
console.log('txId = ' + txId);
|
AWSService.confirmTrans(staticResource.updateUrl,JSON.stringify(transParameters),function(result){
|
console.log(fileName);
|
console.log(JSON.stringify(result))
|
},staticResource.token)
|
}
|
