我在客户端使用了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();

}