我在客户端使用了Jquery fileupload.
在我的JS文件中,
function doUploadPhoto(seq) {
$('#fileupload').fileupload({
url : 'news/upload.html?s=' + seq,
sequentialUploads : true,
disableImageResize : false,
imageMaxWidth : 1024,
imageMaxHeight : 1024,
previewCrop : true,
dropZone : $("#dropZone"),
acceptFileTypes : /(\.|\/)(gif|jpe?g|png)$/i,
progress : function(e, data) {
if (data.context) {
var progress = data.loaded / data.total * 100;
progress = Math.floor(progress);
$('.progress').attr('aria-valuenow', progress);
$('.progress').css('display', 'block');
$('.bar').css('width', progress + '%');
}
},
progressall : function(e, data) {
var progress = data.loaded / data.total * 100;
progress = Math.floor(progress);
$('.progressall').attr('aria-valuenow', progress);
$('.progressall').css('display', 'block');
$('.allbar').css('width', progress + '%');
if (progress > 20) {
$('.allbar').text(progress + '% Completed');
}
},
stop: function (e) {
return;
}
});
}
处理您对图像上传的特定请求(我使用过Spring).
@RequestMapping(value = "/news/upload.html", method = RequestMethod.POST)
public final void uploadNewsPhoto(final HttpServletRequest request, final HttpServletResponse response)
throws Exception {
doUploadNewsPhoto(request, getSessionFileItems(request));
}
用于上传图片
public final synchronized String doUploadNewsPhoto(final HttpServletRequest request,
final List sessionFiles) throws UploadActionException {
try {
List> ret = new ArrayList>();
for (FileItem item : sessionFiles) {
if (!item.isFormField()) {
try {
// get news sequence for save it's images
Long seq = Long.parseLong(request.getParameter("s"));
Map res = newsPhotoBiz.saveToFile(seq, item, SecuritySession.getLoginUserSeq());
res.put("name", item.getName());
res.put("size", item.getSize());
ret.add(res);
}
catch (Exception e) {
log.error("Error, can't upload news photo file, name:" + item.getName(), e);
}
}
}
// Remove files from session because we have a copy of them
removeSessionFileItems(request);
Map json = new HashMap();
json.put("files", ret);
JSONObject obj = (JSONObject) JSONSerializer.toJSON(json);
// return to client side about uploaded images info
return obj.toString();
}
catch (Exception e) {
log.error("Error, when upload news photo file", e);
throw new UploadActionException(e);
}
}
用于保存图像
public final Map saveToFile(final Long newsSeq, final FileItem item, final Long loginUserSeq)
throws BusinessException {
String staticDir = System.getProperty("staticDir");
Date today = new Date();
SimpleDateFormat fmtYMD = new SimpleDateFormat("/yyyyMMdd");
SimpleDateFormat fmtHMS = new SimpleDateFormat("HHmmssS");
String saveDir = "data/news" + fmtYMD.format(today);
String format = ".jpg";
try {
format = item.getName().substring(item.getName().lastIndexOf("."), item.getName().length());
}
catch (Exception e) {
format = ".jpg";
}
try {
String fileName = newsSeq + "_" + fmtHMS.format(today) + format;
NewsPhotoBean bean = new NewsPhotoBean();
bean.setNewsSeq(newsSeq);
bean.setFile(saveDir + "/" + fileName);
// save image infos in database and return it's sequence
Long photoSeq = newsPhotoService.add(bean, loginUserSeq);
// Save image in specify location
String filePath = staticDir + "/" + saveDir;
FileSupport.saveFile(filePath, fileName, item);
Map ret = new HashMap();
ret.put("seq", newsSeq);
ret.put("photoSeq", photoSeq);
ret.put("path", saveDir + "/" + fileName);
ret.put("ext", format.substring(1));
//client side may need uploaded images info
return ret;
}
catch (Exception e) {
throw new BusinessException("Error occur when save file. newsSeq : " + newsSeq, e);
}
}
用于写图像
// Save Image by FileItem that gets from Image Upload
public static String saveFile(final String filePath, final String fileName, final FileItem item) throws Exception {
File file = new File(filePath);
file.setExecutable(true, false);
file.setWritable(true, false);
if (!file.exists()) {
file.mkdirs();
}
File imageFile = new File(file, fileName);
item.write(imageFile);
item.setFieldName(filePath + fileName);
return item.toString();
}