本篇使用的是 form 提交，ajax 发送请求（但个人感觉把容器换成 div 之类的也是一样的思路，待验证），提交数据类型 FormData 对象。
H5中 form 表单的代码：
<form class="inpform" id="uploadForm" enctype="multipart/form-data">
<!-- 注意enctype必须得填 -->
<div class="f-inp">
<div><i>请输入您的号码：</i>
<input type="text" name="phone" id="phone" >
</div>
<input type="file" id="files" name="files" multiple/> <!-- multiple 确保能选择多文件 -->
</div>
</form>
<input type="button" value="提交" onclick="add();">js、ajax代码：
function add(){
var formData = new FormData($("#uploadForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。
$.ajax({
async: false, //要求同步 不是不需看你的需求
url : "/uploadImage/save",
type : 'POST',
data : formData,
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
success : function(result) {
...
},
error : function(result) {
...
}
});
}java Spring 中的代码：
处理器
@Controller
@RequestMapping("/uploadImage")
public class UploadController{
@RequestMapping("/savecc")
//注意传入的参数
public void saveImageCC (@RequestParam(value = "files", required = true)MultipartFile[] multipartFiles ,String phone, HttpServletRequest request)throws Exception{
...
//调用文件上传处理类
Map<String, Object> result = UploadFilesUtils_cc.uploadCC(multipartFiles, request, 1, "", phone, 1000, 1000, true);
...
}
}
utils类：
public class UploadFilesUtils_cc {
public static Map<String,Object> uploadCC(MultipartFile[] multipartFiles,HttpServletRequest request, int type,String module,String folder,int width,
int height ,Boolean createFolder)
throws UnsupportedEncodingException ,IOException , URISyntaxException{
request.setCharacterEncoding("utf-8");
//结果集
Map<String, Object> result = new HashMap<>();
//图片集
Map<String, String> data = new HashMap<>();
String uploadPath = "E:/reporitory/static/uploadImg/"+folder;
File file = new File(uploadPath);
if(!file.exists()){
file.mkdirs();
}
try{
Boolean success = true ;
String message = "文件上传失败";
String fieldNames = "";
String urls = "";
String uuid ;
for(MultipartFile multipartFile:multipartFiles){
if(multipartFile != null){
//如果fileitem中封装的上传文件，得到上传的文件名称
//filename格式"c:/static/mod/xxx.png"
String filename = multipartFile.getOriginalFilename();
fieldNames += "|" + multipartFile.getName();
if(StringUtils.isNotBlank(filename)){
// 注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：
// c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
// 处理获取到的上传文件的文件名的路径部分，只保留文件名部分
filename = filename.substring(filename.lastIndexOf("/") + 1);
// 得到上传文件的扩展名
String fileExtName = filename.substring(filename.lastIndexOf(".")+1);
// 如果需要限制上传的文件类型，那么可以通过文件的扩展名来判断上传的文件类型是否合法
// 此处是图片格式校验
if((type == Constant.FileType.image.key)
&& !UploadFilesUtils_cc.checkIMGType(fileExtName)) {
message = "图片格式不正确,请重新上传";
success = false;
result.put("success", success);
result.put("message", message);
return result;
//break;
} else {
//使用UUID解决文件重名问题
uuid = UUID.randomUUID().toString();
//数据库里面需要保存的图片上传的路径
String url = uuid + "." + fileExtName;
//获取item中的上传文件输入流
InputStream in = multipartFile.getInputStream();
//创建文件输出流
FileOutputStream out = new FileOutputStream(uploadPath + "\\" + url);
//创建缓冲区
byte[] buffer = new byte[1024];
//判断输入流中的数据是否已经读完的标识
int len = 0;
//循环将输入流读入缓冲区，(len=in.read(buffer))>0就表示in里面还有数据
while((len = in.read(buffer)) > 0){
//使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + url)当中
out.write(buffer , 0 , len);
}
//关闭输入流
in.close();
//关闭输出流
out.close();
if(StringUtils.isBlank(urls)){
urls = url;
} else {
urls += "|" + url;
}
}
}
//data.put("linked", "..."+folder+"/"+ urls);
//data.put("filename", filename);
}
}
fieldNames = fieldNames.substring(1);
data.put("phone", folder);
data.put("fieldNames", fieldNames);
data.put("linked","..."+folder+"/"+ urls);
result.put("success", true);
result.put("message", "图片上传成功！");
result.put("data",data);
return result;
}catch(Exception e){
System.out.println("上传文件出现错误：" + e.getMessage());
return null;
}
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
