1. 引入jar包
commons-io-2.4.jar
commons-fileupload-1.2.2.jar
2. 頁面代碼
4.1 頁面-表單提交
~~~
<form action="../upload" id="form1" method="post" enctype="multipart/form-data">
<input type="text" name="uname"/>
<input type="file" name="photo" multiple="multiple" accept="image/*" onchange="preview(this)"/>
<button type="submit">提交</button>
</form>
~~~
4.2 頁面-ajax提交
~~~
<form action="../upload" id="form1" method="post" enctype="multipart/form-data">
<input type="text" name="uname"/>
<input type="file" name="photo" multiple="multiple" accept="image/*" onchange="preview(this)"/>
<button type="button" onclick="doupload()">提交</button>
</form>
<script>
function doupload()
{
var form=document.getElementById("form1");
var fd =new FormData(form);
$.ajax({
url: "../upload",
type: "POST",
data: fd,
dataType:"json",
processData: false, // 告訴jQuery不要去處理發送的數據
contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
success: function(data){
console.log(data.result);
}
});
}
</script>
~~~
3. springmvc 配置文件
~~~
<!-- 文件上傳 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 設置上傳文件的最大尺寸為5MB -->
<property name="maxUploadSize">
<value>5242880</value>
</property>
</bean>
~~~
4. 控制器代碼
單文件上傳
~~~
@RequestMapping("/register")
public String reg(Userinfo u, String[] hobby, MultipartFile upload)
{
//文件上傳
String filename = System.currentTimeMillis()+upload.getOriginalFilename();
//
File dest = new File("E:/apache-tomcat-8.0.29/webapps/upload",filename);
try {
//把文件從臨時文件拷貝到目標地址上
upload.transferTo(dest);
} catch (IllegalStateException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
~~~
多文件上傳(注意，如果上傳多個文件時錯誤，需要加@RequestParam注解)
~~~
@RequestMapping("/upload")
@ResponseBody
public String upload(String uname, @RequestParam MultipartFile[] photo)
{
System.out.println(uname);
for(int i=0; i<photo.length;i++)
{
System.out.println(photo[i].getOriginalFilename());
File f = new File("d:/io",filename);
try {
photo.transferTo(f);
} catch (IllegalStateException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return "{\"result\":true}";
}
~~~
5. 文件預覽
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.js"></script>
<script>
function preview(obj)
{
for(var i=0; i<obj.files.length;i++)
{
var file = obj.files[i];
//限定上傳文件的類型，判斷是否是圖片類型
if (!/image\/\w+/.test(file.type)) {
alert("只能選擇圖片");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
//base64Code=e.target.result;
base64Code=this.result;
$("#preview").append('<img width="200px" src="'+base64Code+'"/>');
}
}
}
</script>
</head>
<body>
<input type="file" multiple="multiple" accept="image/*" onchange="preview(this)"/> // accept="image/*"在手機上只彈出手機圖庫
<div id="preview"></div>
</body>
</html>
~~~
