頁面：
<div showCollapseButton="true">
<h1 id="h1" style="margin-left:10px;">媒體信息</h1>
<div id="toolbar1" class="mini-toolbar" style="padding:2px;">
<form id="form_1" style="margin-right: 20px; float: left;" action="" enctype="multipart/form-data" method="post">
<input name="file_1" id="file_1" style="position: absolute; opacity: 0;" onchange="getImgURL(this,1)" type="file" size="1" accept="image/*">
<a class="mini-button" id="img_1" style="text-align: center; display: block;" plain="true" iconcls="icon-folderopen">正面像</a>
</form>
</div>
</div>
1:包含文件的form需要聲明enctype="multipart/form-data"
2：style="display: block;"义钉，block表示獨占一個塊級元素盯荤，獨占一行
3：將file標簽設置為透明： style="position: absolute; opacity: 0;"
覆蓋到a標簽上，點擊a其實就是在點擊file（原因是如果給a標簽加入點擊事件觸發(fā)文件選擇镊折，form表單提交的時候獲取不到文件（頁面會報錯沒有權限）胯府，取到file中的文件必須時候file標簽點擊事件觸發(fā)）
4： accept="image/*"，該屬性是限制文件上傳類別的（H5以下不支持）所以加入：
function getImgURL(node,coid){
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var filetypes =[".jpg",".png"];
var filepath = node.value;
var filemaxsize = 1024*2;//2M
if(filepath){
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if(filetypes && filetypes.length>0){
for(var i =0; i<filetypes.length;i++){
if(filetypes[i]==fileend){
isnext = true;
break;
}
}
}
if(!isnext){
alert("不接受此文件類型恨胚！");
node.value ="";
return false;
}
}else{
return false;
}
if (isIE && !node.files) {
var filePath = node.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在骂因，請重新輸入！");
return false;
}
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = node.files[0].size;
}
var size = fileSize / 1024;
if(size>filemaxsize){
alert("附件大小不能大于"+filemaxsize/1024+"M赃泡！");
node.value ="";
return false;
}
if(size<=0){
alert("附件大小不能為0M寒波！");
node.value ="";
return false;
}
}
5:帶文件的form表單提交
form.attr('action','uploadImg.action');
form.attr('method','post');
form.ajaxSubmit({
url:"uploadImg.action",
type : 'post',
dataType : 'text',
success:function(data){
img.attr("src", "..\\"+data+"?"+new Date().getTime());
return false; //阻塞表單自動提交
},
error : function(data) {
alert("error:" + data.responseText);
return false; //阻塞表單自動提交
}
});
6：img.attr("src", "..\"+data+"?"+new Date().getTime()); 在src地址中加時間戳乘盼，防止頁面圖片不刷新或者不顯示
7：html5，對于選中的照片可以直接回顯
//html5的照片回顯
var simpleFile = file.files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("請確保文件類型為圖像類型");
return false;
}
var reader = new FileReader();
// 將文件以Data URL形式進行讀入頁面
reader.readAsDataURL(simpleFile);
reader.onload = function(e){
console.log(this.result);
img.attr("src",this.result);
}
8：后臺
@RequestMapping("/uploadImg.action")
@ResponseBody
/**
* 上傳數(shù)據(jù)及保存文件
*/
public String uploadImg(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String reString="";
// 檢測是否為多媒體上傳
if (!ServletFileUpload.isMultipartContent(request)) {
// 如果不是則停止
PrintWriter writer = response.getWriter();
writer.println("Error: 表單必須包含 enctype=multipart/form-data");
writer.flush();
return reString;
}
String serverPath="文件上傳保存路徑"俄烁；
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 如果目錄不存在則創(chuàng)建
File uploadDir = new File(serverPath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();//mkdirs蹦肴，創(chuàng)建文件或者文件夾，如果目標不存在一起創(chuàng)建
}
MultipartFile file1 = multipartRequest.getFile("file_"+coid);
String fileName = file1.getOriginalFilename();
int lastLength = fileName.lastIndexOf(".");
String fileType = fileName.substring(lastLength); //獲取上傳圖片的類型
//File.separator 在Windows下的路徑分隔符和Linux下的路徑分隔符是不一樣的,這個方法可以自動獲取
String filePath = serverPath + File.separator + "文件的名字"+fileType;
// 在控制臺輸出文件的上傳路徑
System.out.println(filePath);
//上傳文件
try{
File storeFile = new File(filePath);
file1.transferTo(storeFile);//spring mvc提供的文件上傳操作
// Map<String,MultipartFile> fileMap =multipartRequest.getFileMap();//多文件上傳時使用
reString=xdFilePath+ File.separator + coid+fileType;;
request.setAttribute("message","文件上傳成功!");
}catch (Exception ex) {
request.setAttribute("message",
"錯誤信息: " + ex.getMessage());
}
return reString;
}
