1.js代码(最后更新时间2020-3-3)
var fileUpload={
//进行文件上传
//file_id: 文件input的id
//return_url_id: 文件url要保存到的input的id
//return_name_id: 文件名称要保存到的input的id
fileUpload:function(file_id,return_url_id,return_name_id){
var formData = new FormData();
formData.append("file",$("#"+file_id)[0].files[0])
$.ajax({
url: '${request.contextPath}/file/file_upload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(o) {
if(o.code==1){
$("#"+return_name_id).val(o.fileName);
$("#"+return_url_id).val(o.path);
}else{
Message.error(o.msg);
}
},
error: function(data) {
}
});
},
//验证文件的格式与大小,验证通过返回true,否则返回false
//file_id: 文件input的id
//correct_file_type: 正确的文件类型,数据类型是数组
//fileSize 文件的大小,以kb为单位
file_format_verify:function(file_id,correct_file_type,correct_file_size){
var file = $("#"+file_id);
var filePath = file.val();
if("" != filePath){
var fileType = fileUpload.getFileType(filePath);
//判断上传的附件格式
//是否是指定的格式
var is_correct=false;
for(var i=0;i<correct_file_type.length;i++){
var temp=correct_file_type[i];
if(temp==fileType){
is_correct=true;
break;
}
}
if(!is_correct){
var text="请上传: ";
for(var i=0;i<correct_file_type.length;i++){
var temp=correct_file_type[i];
text=text+temp;
if(i!= (correct_file_type.length-1) ){
text=text+","
}
if(i%4==0){
text=text+"</br>"
}
}
Message.error(text);
file.val("");
return false;
}
//获取附件大小（单位：KB）
var fileSize = document.getElementById("file").files[0].size / 1024;
if(fileSize > correct_file_size){
Message.error("文件大小不能超过"+(fileSize/1024)+"Mb");
file.val("");
return false;
}
return true;
}
return false;
},
//验证文件的格式与大小,使用默认的设置
file_format:function(file_id){
var correct_file_type=["pdf","txt","xls","xlsx","ppt","pptx","doc","docx","png","jpg","jpeg","mp4","mp3","avi","zip","rar文件格式"];
return fileUpload.file_format_verify(file_id,correct_file_type,102400)
},
getFileType:function(filePath){
var startIndex = filePath.lastIndexOf(".");
if(startIndex != -1)
return filePath.substring(startIndex+1, filePath.length).toLowerCase();
else return "";
},
download:function (path_id,fileName_id) {
var path=$("#"+path_id).val();
var fileName=$("#"+fileName_id).val();
fileUpload.downloadFile(path,fileName);
},
downloadFile:function (path,fileName) {
path=encodeURIComponent(path)
fileName=encodeURIComponent(fileName)
$.post("${request.contextPath}/file/fileIsExist",{"path":path},function(o){
if(o.code==1){
window.location.href="${request.contextPath}/file/download?path="+path+"&fileName="+fileName;
}else{
Message.error(o.msg);
}
});
}
}
2.编辑页面的上传与下载
-
样式:
样式
- html
- attachmenturl和filename分别对应Model的字段,是文件的url和文件的名称.
- 三个input的id可不用修改,只是用来标记.多文件上传可以通过不同的id进行区分
<div class="form-group" >
<label class="col-xs-2 control-label">附件 </label>
<div class="col-xs-10">
<input type="hidden" class="form-control" style="width:400px" id="file_url" name="attachmenturl"
placeholder="附件url ">
<input type="hidden" class="form-control" style="width:400px" id="file_name" name="filename"
placeholder="附件名称 ">
<input type="file" id="file" style="width:400px" onchange="E.file_upload()"/>
<a class="gbn gbn-s gbn-warning " href="javascript:" onclick="fileUpload.download('file_url','file_name');" style="display:none;background-color: cadetblue;margin-top: 5px;" id="download1">下载原文件</a>
</div>
</div>
- 文件回显和上传方法
- fileUpload.file_format("file")是用来验证文件的格式与大小,如果不需要可以去掉.有其他需求可用 file_format_verify(file_id,correct_file_type,correct_file_size)方法去指定文件的类型和大小
var E={
load:function(){
$.getJSON("${request.contextPath}/notice/v1/get/"+$("#id").val(),function(o){
if(o.code ==1){
$("#form1").setFormValues(o.data);
if(!Utils.isEmpty(o.data.filename)){
$("#download1").show();
$("#download1").html("下载原文件:"+o.data.filename)
}
}
});
},
file_upload:function () {
if(fileUpload.file_format("file")){
fileUpload.fileUpload("file","file_url","file_name")
}
},
}
3.index页面的下载
- FILENAME和ATTACHMENTURL需要根据实际字段进行修改
{"hidden":false,"align":"left","sortable":false,"name":"FILENAME","resizable":true,"label":"附件",
formatter:function(cellValue, options, rowObject){
var temp = "";
if(!Utils.isEmpty(cellValue)) {
var path=encodeURIComponent( rowObject.ATTACHMENTURL);
var fileName=encodeURIComponent(rowObject.FILENAME);
var fun="fileUpload.downloadFile(\"" + path+ "\",\""+fileName+"\")";
temp = cellValue + "<a class='gbn-min glyphicon glyphicon-download-alt g-fr' style='color:white;' href='javascript:;' title='下载附件' onclick='"+fun+"' ><i></i></a>";
}
return temp;
}
},
网友评论