Java实现多图片预览上传_java使用FileReader上传图片，可支持预览，支持多张上传...

效果图：

样式：

.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;     }