ajax_用ajax实现多文件上传

来源：互联网发布：mac软件更新不了编辑：程序博客网时间：2024/06/03 17:53

jsp代码块

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="./jquery-1.8.0.min.js" type="text/javascript"></script><script src="./upload.js" type="text/javascript"></script></head><body>    <!-- <form id="uploadForm" action="http://localhost:8080/upload/upload/upload.action" method="post" enctype="multipart/form-data"> -->    <form id="uploadForm" >        <input type="file" name="img" />        <input type="button" value="上传" onclick="doUpload()">         <!-- <button type="submit">提交</button> -->    </form></body><script type="text/javascript"></script></html>

js代码

function doUpload(){        var formData = new FormData($("#uploadForm")[0]);        $.ajax({              url : "http://localhost:8080/upload/upload/upload.action",              type: 'POST',              data: formData,              async: false,              cache: false,              contentType: false,              processData: false,             success : function(data) {                  alert("成功了！");            },              error : function(data) {                  alert("失败了！");            }        });     }

.action 后台代码

package com.mashen.upload;import java.io.File;import java.io.IOException;import java.util.UUID;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controller@RequestMapping("/upload")public class Upload {    @RequestMapping("/upload")    @ResponseBody    public void upload(@RequestParam(value="img")MultipartFile img){        System.out.println("找到我了！！！");        //获取文件名        String fileName = img.getOriginalFilename();        //生成存储名        String saveName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));        //定义存储路径        File file = new File("E:/test/",saveName);        try {             //存储文件            img.transferTo(file);        } catch (IllegalStateException e) {            e.printStackTrace();        } catch (IOException e) {            e.printStackTrace();        }    }}

基于H5的多文件上传
jsp部分

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="./jquery-1.8.0.min.js" type="text/javascript"></script><script src="./upload.js" type="text/javascript"></script></head><body>    <!-- <form id="uploadForm" action="http://localhost:8080/upload/upload/upload.action" method="post" enctype="multipart/form-data"> -->     <form id="uploadForm" >        <input type="file" name="img" multiple="multiple"/>        <input type="button" value="上传" onclick="doUpload()">        <!-- <button type="submit">提交</button> -->    </form></body><script type="text/javascript"></script></html>

.action部分

package com.mashen.upload;import java.io.File;import java.io.IOException;import java.util.Collection;import java.util.List;import java.util.Map;import java.util.UUID;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.Part;import org.springframework.http.HttpRequest;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controller@RequestMapping("/upload")public class Upload {    @RequestMapping("/upload")    @ResponseBody    public void upload(@RequestParam(value = "img") List<MultipartFile> list) {        System.out.println("找到我了！！！");        try {            for (MultipartFile file : list) {                String fileName = file.getOriginalFilename();                String saveName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));                File file1 = new File("E:/test/", saveName);                file.transferTo(file1);            }        } catch (IllegalStateException e) {            e.printStackTrace();        } catch (IOException e) {            e.printStackTrace();        }    }//使用springMVC多文件上传通用写法@RequestMapping("/upload2")    @ResponseBody    public void upload2(HttpServletRequest request , HttpServletResponse response){        //创建一个通用的多部分解析器          CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());        //判断 request 是否有文件上传,即多部分请求(即检查form中是否有enctype="multipart/form-data")        if(multipartResolver.isMultipart(request)){            //转换成多部分request            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;            //取得request中的所有input的name             Iterator<String> iter = multiRequest.getFileNames();            while(iter.hasNext()){                //取得一个input里面所有的上传文件                  List<MultipartFile> list = multiRequest.getFiles(iter.next());                for(MultipartFile file : list){                    if(file != null){                        //取得当前上传文件的文件名称                         String myFileName = file.getOriginalFilename();                        //如果名称不为“”,说明该文件存在，否则说明该文件不存在                          if(myFileName.trim() != null){                            //重命名上传后的文件名                              String saveName = UUID.randomUUID().toString() + myFileName.substring(myFileName.lastIndexOf("."));                            //定义上传路径                              File localFile = new File("E:/test/",saveName);                            try {                                //保存                                file.transferTo(localFile);                            } catch (IllegalStateException e) {                                e.printStackTrace();                            } catch (IOException e) {                                e.printStackTrace();                            }                        }                    }                }            }        }    }}

0 0