实操——使用uploadify插件(php版和Java版) 与 Dropzone.js插件分别实现附件上传
/* Dropzone上传插件配置 */
var IsServerError = false;//服务器获取配置出错
var fileList = new Array();
var fileUploadingList = new Array();
var fileUploadedPathsArray = new Array();//已上传的文件在服务器的路径集合；用于遇到异常时删除已上传的文件。（相当于回滚）
var uploadFileArray = new Array();
var xmlHttpRequestArray = new Array();
Dropzone.options.dropzoneUploadForm = { //此处的"dropzoneUploadForm" 是dropzone的HTML元素ID的驼峰命名，比如<form id="my-form"></form>,那么此处应该写：Dropzone.options.myForm
paramName: "myFile", //与后端实体里的 private FormFile myFile;对应，如果实体没有就不匹配，也可以放到下面的 "sending" 中
params: { // 可传公共参数
key1: "value11",
key2: "value2"
},
maxFiles: 25, //最大上传数量
maxFilesize: 20, // MB 单个文件大小上限
filesizeBase: 1000,
acceptedFiles: ".doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.7z,image/*,application/pdf",
addRemoveLinks: true,
clickable: true,
autoProcessQueue: true, // true:自动上传，一次性上传parallelUploads个文件，上传成功后后面排队的其他队伍也会继续排队上传。false:关闭自动上传, 手动调度 ,但每次需要点击“上传”按钮才会触发上传，排队的其他文件不会自动上传。
parallelUploads: 2, //最大并行处理量（一次同时上传的个数，不设置的话，默认：2个）
/* 插件消息翻译 */
dictInvalidFileType: '仅支持以下文件格式：.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.7z,image/*,application/pdf',
dictFileTooBig: '上传失败：文件大小超出最大20M',
dictMaxFilesExceeded: '上传失败：上传文件超出最大数量25',
dictCancelUpload: '取消上传',
dictRemoveFile: '移除文件',
dictCancelUploadConfirmation: '确认取消上传',
dictResponseError: "文件上传失败!",
dictDefaultMessage: "<span class='bigger-150 bolder'><i class='icon-caret-right red'></i>拖动文件</span>上传\ <span class='smaller-80 gre'>(或者点击上传)</span> <br /> \ <i class='upload-icon icon-cloud-upload blue icon-3x'></i>",
/* 上传缩略图预览模板 */
previewTemplate: ' <div id="viewer" class="dz-preview dz-file-preview"> <div class="dz-details" onClick="viewFile(this)" name=""> <div style="display:none;" class="fileId"></div> <div class="dz-filename"><span data-dz-name></span></div> <div class="dz-size" data-dz-size></div> <img data-dz-thumbnail /> </div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> <div class="dz-success-mark"><span>?</span></div> <div class="dz-error-mark"><span>?</span></div> <div class="dz-error-message"><span data-dz-errormessage>""</span></div> </div> ',
/*accept: function(file, done) {
fileList_Accepted.push(file)
done();
}, */
init: function () {
/* var self = this;
// 非自动上传。点击上传按钮开始ajax上传
this.element.querySelector("button#uploadBtn").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
self.processQueue();
}); */
/*var accept = this.getAcceptedFiles();//所有接受的文件（合法）
var reject = this.getRejectedFiles();//所有拒绝的文件（非法）
var uploading = this.getQueuedFiles();//所有上传中的文件
var queued = this.getRejectedFiles(); //所有排队中的文件
*/
var this_ = this;
fileList = this.getAcceptedFiles();//所有接受的文件（合法）
this.on("addedfile", function (file) { //新添加的文件，每添加一个新文件都会触发一次该函数，可以使用alert测试一下
//alert("addedfile:"+file.name)
//fileList.push(file);
})
this.on("canceled", function (file, response) { //当取消文件上传式调用
//单个文件点击“取消上传”并确认后执行该函数，将该文件从上传列队中移除。
for (var i in uploadFileArray) {
if (uploadFileArray[i].name.trim() == file.name.trim()) {
var xmlHttpRequest = xmlHttpRequestArray[i];
xmlHttpRequest.abort();
}
}
})
this.on("sending", function (file, xmlHttpRequest, formData) { //文件上传前调用
console.log(xmlHttpRequest);
uploadFileArray.push(file);
xmlHttpRequestArray.push(xmlHttpRequest);
// 每个文件需要传后台不同的参数的话，可在此处处理
formData.append('fileName',escape(escape(file.name))); // fileName 如果实体里有对应的属性，直接映射上，不管有没有会都会放入request参数里
})
this.on("uploadprogress", function (file, progress, bytesSent) {
//文件上传监听器（file：文件、progress：上传进度n%、bytesSent：）
})
this.on("complete", function (file, response) {
//当上传完成，成功或者出现错误时调用.
//alert("complete:"+response)
})
this.on("success", function (file, response) { //文件已经成功上传，获得服务器返回信息作为第二个参数
//每个文件上传成功后有以下处理
//1.该文件会自动将UI拼接到上传区域，我们需要将文件的服务器路径隐藏到该UI中。为移除等操作提供便利。
IsServerError = JSON.parse(JSON.parse(response).error)
var File_PhysicalPath = "";
var list = JSON.parse(JSON.parse(response).uploadFileResultClientList)
for (var k in list) {
var file0 = list[k];
//alert(file0.fileName.trim()+":"+file.name+"\n"+file0.fileSize+":"+file.size)
if (file0.fileName.trim() == file.name && file0.fileSize == file.size) {
File_PhysicalPath = file0.physical_path;
}
}
$(".dz-filename span").each(function () {
if ($(this).text().trim() == file.name.trim()) {
$(this).parent().parent().find(".fileId").text(File_PhysicalPath);
fileUploadedPathsArray.push(File_PhysicalPath);
}
})
});
this.on("queuecomplete", function (file, response) { //当上传队列中的所有文件上传完成时调用.
//alert("任务完成！")
if (IsServerError) {
alert("服务器获取文件夹配置失败！即将回滚上传操作");//若提示该警告，请查看com.nbc.demok.io.Upload.multi_upload()方法中的PropertiesUtils.getProperty("")获取配置是否为空。为空的话，请及时在配置文件中添加该配置
//1.后台：遇到服务器异常，删除已上传的服务器上的文件
var filePaths = "";
for (var i in fileUploadedPathsArray) {
var path = fileUploadedPathsArray[i];
if (path != "") {
filePaths = (filePaths == "") ? path : (filePaths + "¤¤¤¤¤" + path);
}
}
if (filePaths.trim() != "") {
removeFilesFromServer(filePaths);//服务器：移除所有未遇到错误之前的刚刚上传了的文件
}
//2.前端：移除所有显示的附件
this.removeAllFiles(true);
}
});
this.on("removedfile", function (file) { //删除单一文件
//alert("removedfile:"+file.name+"\npath:"+$(file.previewElement).find(".fileId").text())
//文件在服务器上的路径
var filePath = $(file.previewElement).find(".fileId").text().trim();
//删除文件操作有以下步骤：
//1.使用ajax删除在服务器上的该文件
if (filePath != "") {
removeFilesFromServer(filePath);
}
//2.删除文件在前端的显示
this.removeFile(file);
});
this.on("error", function (file, errorMessage) { //不接受该文件（非定义的可接受类型）或上传失败
//alert("error:"+file.name+" "+errorMessage+"\nIsServerError:"+IsServerError)
//this.removeFile(file);
});
}
};
function removeFilesFromServer(filePaths) {
var path = $("#basePath").val();
if (path == undefined) {
alert("获取工程根目录出错");//请查看页面是否有id="basePath"的输入框，并且该输入框存放项目根目录
return;
}
$.ajax({
type: "POST",
timeout: 60000,
dataType: "json",
url: path + "/dropzone_backend/dropzone_upload.jsp?method=remove", //后台url请求，处理传递的参数
async: false,
data: {
filePaths: escape(escape(filePaths))
},
beforeSend: function (xhr) {
$("#loading_").css("display", "block"); // 数据加载成功之前，使用loading组件（使用加载中的图片，显示图片gif即可）
},
success: function (data) {
//ajax请求成功执行该函数
$("#loading_").css("display", "none"); //关闭加载中图片
//alert("删除成功，数量："+data.count+"个")
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#loading_").css("display", "none") //
if (textStatus == "timeout") {
alert(" 请求超时，可能是网络较慢，请重新加载")
} else {
alert("XMLHttpRequest.status:" + XMLHttpRequest.status + "\n" + "XMLHttpRequest.readyState:" + XMLHttpRequest.readyState + "\n"
+ "textStatus:" + textStatus);
}
}
});
}
function viewFile(obj) {
var filePath = $(obj).find(".fileId").text();
if (filePath.trim().length > 0) {
p = filePath.split(".");
var suffix = "." + p[p.length - 1]; //后缀为 [.doc .docx .xls .xlsx .ppt .pptx]可以转pdf在线浏览
//alert(suffix);
var IsOffice = false;
var arr = new Array(".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx")
for (var i in arr) {
if (suffix == arr[i].trim()) {
IsOffice = true;
}
}
if (IsOffice) {
Open_Office_File(filePath)
} else {
Open_Not_Office_File(filePath);
}
}
}
function Open_Office_File(path) {
alert("查看文件处理:" + path)
}
function Open_Office_File(path) {
alert("查看文件处理:" + path)
}