页面：
<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标签加入点击事件触发文件选择，form表单提交的时候获取不到文件（页面会报错没有权限），取到file中的文件必须时候file标签点击事件触发）
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
/**
* 上传数据及保存文件
*/
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;
// 如果目录不存在则创建
File uploadDir = new File(serverPath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();//mkdirs，创建文件或者文件夹，如果目标不存在一起创建
}
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;
}
