视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001 知道1 知道21 知道41 知道61 知道81 知道101 知道121 知道141 知道161 知道181 知道201 知道221 知道241 知道261 知道281
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
Ajax怎么实现文件批量上传与下载
2020-11-27 19:57:34 责编:小采
文档

这次给大家带来Ajax怎么实现文件批量上传与下载,Ajax实现文件批量上传与下载的注意事项有哪些,下面就是实战案例,一起来看一下。

今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了。

上传form:

<form id="uploadfiles" enctype="multipart/form-data">
 <input type="file" multiple="multiple" id="file_upload" name="file_upload" /> 
 <input type="button" value="上传" onclick="upload()" />
</form>

上传Ajax:

<script type="text/javascript">
/*
 * 上传文件
 */
function upload(){
 var formData = new FormData($( "#uploadfiles" )[0]);
 $.ajax({
 type: "post",
 url: "./path/upload",
 dataType: "json",
 data: formData,
 /** 
 *必须false才会自动加上正确的Content-Type 
 */ 
 contentType : false, 
 /** 
 * 必须false才会避开jQuery对 formdata 的默认处理 
 * XMLHttpRequest会对 formdata 进行正确的处理 
 */ 
 processData : false,
 success: function(data){//从后端返回数据进行处理
 if(data){
 alert("上传成功!");
 }else{
 alert("上传失败!");
 }
 },
 error: function(err) {//提交出错
 $("#msg").html(JSON.stringify(err));//打出响应信息
 alert("服务器无响应");
 }
 });
}
</script>

spring.xml配置加上:

<!-- 配置文件上传 -->
 <bean id="multipartResolver"
 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 <!-- 默认编码 -->
 <property name="defaultEncoding" value="utf-8" />
 <!-- 文件大小最大值 -->
 <property name="maxUploadSize" value="10485760000" />
 <!-- 内存中的最大值 -->
 <property name="maxInMemorySize" value="40960" />
 </bean>
controller:
/*
 * 上传多个文件
 */
 @RequestMapping(value = "/upload", produces = "application/json;charset=UTF-8")
 public @ResponseBody
 boolean uploadFiles(@RequestParam("file_upload") MultipartFile [] files) {
 boolean result = false;
 String realPath;
 for(int i=0;i<files.length;i++){
 if (!files[i].isEmpty()) { 
 String uniqueName=files[i].getOriginalFilename();//得到文件名
 realPath="E:"+File.separator+uniqueName;//文件上传的路径这里为E盘
 files[i].transferTo(new File(realPath)); // 转存文件
 result = true; 
 } catch (Exception e) { 
 e.printStackTrace(); 
 } 
 }
 }
 return result;
 }

下载的jsp页面代码根据需求不同自己设计,这里给出controller代码:

/*
 * 下载多个文件
 */
 @RequestMapping(value = "/download")
 public void downloadFiles(HttpServletResponse response) {
 String str= request.getParameter("rows");//下载文件信息,包括文件名、存储路径等
 JSONArray path=(JSONArray) JSONArray.parse(request.getParameter("rows"));
 Path paths[]=new Path[path.size()];
 paths = JSONArray.parseArray(str, Path.class).toArray(paths);
 String uri = "d:"+ File.separator + "mldn.zip";//临时文件存储路径
 File zipFile = new File(uri) ; // 定义压缩文件名称 
 ZipOutputStream zipOut = null;// 声明压缩流对象 
 InputStream input = null;
 //将要压缩的文件加入到压缩
输出流中 try { zipOut = new ZipOutputStream(new FileOutputStream(zipFile)); } catch (FileNotFoundException e) { e.printStackTrace(); } for(int i = 0;i<paths.length;i++){ File file = new File(paths[i].getUri()+File.separator+paths[i].getFilename()); try { input = new FileInputStream(file) ;// 定义文件的输入流 zipOut.putNextEntry(new ZipEntry(file.getName())) ; // 设置ZipEntry对象 } catch (Exception e) { e.printStackTrace(); } } //将文件写入到压缩文件中 int temp = 0 ; try { while((temp=input.read())!=-1){ // 读取内容 zipOut.write(temp) ; // 写到压缩文件中 } } catch (IOException e) { e.printStackTrace(); }finally{ try { input.close() ; zipOut.close() ; } catch (IOException e) { e.printStackTrace(); } } try { // 以流的形式下载文件。 BufferedInputStream fis = new BufferedInputStream(new FileInputStream(zipFile)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); // 清空response response.reset(); OutputStream toClient = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/x-msdownload;"); response.setHeader("Content-Disposition", "attachment;filename=" + zipFile.getName()); toClient.write(buffer); toClient.flush(); toClient.close(); zipFile.delete(); //将生成的服务器端文件删除 } catch (IOException ex) { ex.printStackTrace(); } }

将多个文件打成一个压缩包下载,然后将生成的临时压缩文件删除。

下载页面如果用Ajax提交请求的话要注意:ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。

例子:

function download(){
 var form=$("<form>");//定义一个form表单
 form.attr("style","display:none");
 form.attr("target","");
 form.attr("method","post");
 form.attr("action","./path/download");//请求url
 var input1=$("<input>");
 input1.attr("type","hidden");
 input1.attr("name","rows");//设置属性的名字
 input1.attr("value",“test”);//设置属性的值
 $("body").append(form);//将表单放置在web中
 form.append(input1);
 form.submit();//表单提交 
 }

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

实现无刷新下拉联动的Ajax+Servlet(附代码)

怎样用Ajax异步检查用户名有无重复

下载本文
显示全文
专题