前台上传文件的方法
- 直接使用form表单的方式,如下所示:
<form action = "" method = "post" enctype="multipart/form-data" id="upload_form">
<input type="file" name="imgFile" id="stu_img_file" style="display:none" multiple accept="image/png, image/jpeg,image/jpg,aplication/zip">
</form>
<script type = "text/javascript">
$(function(){
$("#btn").change(function(){$("#upload_form").submit();});
});
</script>
注:
- action中放后台接收上传文件的地址;
- post是上传文件的方式为post方式;
- enctype中使用"multipart/form-data"是指可以上传多个文件;
- input标签中的accept中表示可以上传文件的数据类型;
使用情况:
当点击一行字或者一个按钮的时候需要打开一个上传文件的弹框,这里需要将弹框进行隐藏,
当点击字的时候点击file标签的input,实现打开上传文件的弹框,当file标签做了修改的时候提交form表单到后台进行接收;
不适合使用情况:当后台接收了前台上传的数据后需要对后台返回的结果进行处理,这里是无法做返回结果处理。
- 使用fileUpload进行上传文件。
<a href='javascript:void(0);' id='upload' style="display:none" ></a>
<script type = "text/javascript">
$(function(){
var reqUrl = "http://" + location.host + getBasePath() + "/test/uploadExcelFile.do";
$("#upload").fileUpload({
uploadURL : reqUrl,
callback : function(data){
if (data.flag != undefined && data.flag == 1){
alert(data.msg);
}else if(data.msg != undefined){
alert(data.msg);
}else{
alert("网络错误,请刷新页面再试!");
}
releaseButton("#upload_stu_info");
}
});
$("#upload").parent().find("input[name='file']").each(function(){
$(this).attr("accept",".xls,.xlsx");
});
});
</script>
注:
这里在一开始的时候会在a标签中生成form表单的上传文件的样式,其格式和方式一中的格式类似。
虽然这种方式可以比较灵活的处理上传文件和对上传后的结果进行处理,但是这里的上传标签只有一个,不适用当需要上传多种文件类型和页面上需要上传的类别较多的情况,而且这里需要导入fileUpload的js文件。
- 使用ajax上传文件。
<input id="image" type="file" accept=".png, .jpeg,.jpg" onChange="saveImages('image')" style="display:none"/>
function saveImages(uploadUrl){
$.ajaxFileUpload({
url:"http://"+location.host+getBasePath()+"/paper/savePaperConfiguration.do",
fileElementId:uploadUrl, //input框的ID
enctype: 'multipart/form-data',
dataType: "json", //返回数据类型
success: function (data){ //上传成功
if(data.msg != null){
alert(data.msg);
}else{
alert("请刷新页面再试");
}
}
});
}
注:这里使用ajax上传文件的时候,也是需要注意到需要在项目中将对应的ajax的js添加到项目中去
后台对文件的处理
- 多文件处理
/**
* 将上传的图片保存到本地服务器(单文件或多文件) ufileName为file的name
*
* @retun void
*/
public void uploadImageToServer(HttpServletRequest request,HttpServletResponse response) throws SystemException, FileUploadException {
String savePath = request.getSession().getServletContext().getRealPath("/") + "/download/";
File file = new File(savePath);
if (!file.exists()) {
file.mkdir();
}
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("utf-8");
if (!ServletFileUpload.isMultipartContent(request)) {
return fsFileNames;
}
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 主要在这里的ufileName是前台input框的name
List<MultipartFile> files = multipartRequest.getFiles(ufileName);
String fileName = "";
for (int i = 0; i < files.size(); i++) {
MultipartFile multipartFile = files.get(i);
fileName = multipartFile.getOriginalFilename();
if (!"".equals(fileName) && fileName.length() > 0) {
File uploadFile = new File(savePath + fileName);
try {
FileCopyUtils.copy(multipartFile.getBytes(), uploadFile);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
后台对文件下载的处理
@RequestMapping("/attachmentDownload.do")
public void downAttachment(HttpServletRequest request,HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-type", "text/html;charset=UTF-8");
String fileName = request.getParameter("attachment");
String filePath = request.getParameter("attachmentPath");
fileName = java.net.URLDecoder.decode(fileName, "utf-8");
byte[] buffer;
if (filePath != null) {
int indexOf=filePath.trim().indexOf("http");
if(indexOf<0){
//local host
filePath=request.getSession().getServletContext().getRealPath("/")
+ "/" + filePath;
File file = new File(filePath);
InputStream fis = new BufferedInputStream(new FileInputStream(
file));
buffer = new byte[fis.available()];
fis.read(buffer);
fis.close();
}else{
//net file
buffer = this.getFileFromNetByUrl(filePath);
}
// 清空response
response.reset();
// 设置response的Header
String userAgent = request.getHeader("user-agent").toLowerCase();
if (userAgent.contains("msie") || userAgent.contains("like gecko") ) {
// win10 ie edge 浏览器 和其他系统的ie
fileName = URLEncoder.encode(fileName,"UTF-8");
fileName = fileName.replaceAll("\\+", "%20").replaceAll( "\\(","%28").replaceAll( "\\)","%29").replaceAll( ";","%3B").replaceAll( "@","%40").replaceAll( "\\#","%23").replaceAll( "\\&","%26").replaceAll( "\\,","%2C");
} else {
// fe
fileName = new String(fileName.getBytes("utf-8"), "ISO-8859-1");
}
response.addHeader("Content-Disposition", "attachment;filename="+ fileName);
response.addHeader("Content-Length", "" + buffer.length);
OutputStream out = new BufferedOutputStream(
response.getOutputStream());
response.setContentType("application/octet-stream");
out.write(buffer);
out.flush();
out.close();
}
}
附
- 前台js中下载文件
// 前台js中下载文件的js文件
function attachmentDownLoad(fileConfig) {
location.target = "_black";
location.href = "http://" + location.host + getBasePath() + "/attachment/attachmentDownload.do?attachment=" + fileConfig.fileName
+ "&attachmentPath=" + fileConfig.filePath;
}
- 已知文件路径下载文件
// 这种事前台已知文件的路径进行下载
(1)从数据库中取出数据,拼接成需要进行下载的Excel表格进行下载;
// 批量下载文件,但是得考虑浏览器,有的浏览器不兼容
function download(name, href) {
var a = document.createElement("a"), //创建a标签
e = document.createEvent("MouseEvents"); //创建鼠标事件对象
e.initEvent("click", false, false); //初始化事件对象
a.href = href; //设置下载地址
a.download = name; //设置下载文件名
a.dispatchEvent(e); //给指定的元素,执行事件click事件
}