效果图：
样式：
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
html代码：
上传照片： 如果需要查看原始尺寸图片，可点击相应图片；再次单击该图片，则恢复小图片。
注意一定要在form上加上enctype="multipart/form-data"属性
js代码：
(function($) {
function fileSelect(e) {
$('#Preview').html('');
e = e || window.event;
var files = e.target.files; //FileList Objects
var ireg = /image\/.*/i,
p = document.getElementById('Preview');
var ul = document.getElementById('Errors');
for(var i = 0, f; f = files[i]; i++) {
if(!f.type.match(ireg)) {
var size = f.size;
if(size > 3072000){
alert("图片大小不能超过3M,请重新选择.");
return ;
}
//设置错误信息
var li = document.createElement('li');
li.innerHTML = '
' + f.name +'不是图片文件.';
ul.appendChild(li);
continue;
}
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = '
';
p.insertBefore(span, null);
};
})(f);
//读取文件内容
reader.readAsDataURL(f);
}
}
if(window.File && window.FileList && window.FileReader && window.Blob) {
document.getElementById('Files').addEventListener('change', fileSelect, false);
document.getElementById('Preview').addEventListener('click', function(e) {
if(e.target.tagName.toLowerCase() == 'img' && e.target.className == 'thumb') {
e.target.className = '';
} else if(e.target.tagName.toLowerCase() == 'img' && e.target.className == '') {
e.target.className = 'thumb';
}
});
} else {
document.write('您的浏览器不支持File Api');
}
})(jQuery);
后台代码：
@RequestMapping("saveVipQuestion")
public String auth(VipQuestion vipQuestion, Model model, HttpServletRequest request, HttpServletResponse response) {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List mFiles= multipartRequest.getFiles("imageFiles");
String imageUrl =FileUtils.uploadFile(mFiles,request,response);
}
//工具类上传方法
public static String uploadFile(List mFiles, HttpServletRequest request,
HttpServletResponse response) {
String imageUrl = "";
if (mFiles != null && !mFiles.isEmpty()) {
String realPath = SystemProperties.FILE_SHARE_ROOT;
//String realPath = "D:/sql/";//测试文件夹 StringBuffer imagesUrl = new StringBuffer(); for (int i = 0; i < mFiles.size(); i++) { CommonsMultipartFile mFile = (CommonsMultipartFile) mFiles.get(i); String fileName = mFile.getFileItem().getName(); Date now = new Date(); String original = "ggzj/question/" + DateUtil.formatDate(now, "yyyyMM") + "/" + fileName; imagesUrl.append(original+","); String outputPath = realPath + original; try { long fileLength = writeFile(mFile.getInputStream(), outputPath); } catch (Exception e) { logger.error("上传图片失败:{}", fileName, e); } } imageUrl = imagesUrl.toString(); } return imageUrl; }