效果圖：
樣式：
.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; }