Js上传图片并生成缩略图

Js上传图片并显示缩略图的流程为
Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图

本文上传图片所用的Js库是ajaxfileupload,下载地址：http://files.cnblogs.com/files/yujie365/ajaxfileupload.js，Html布局采用bootstrap.
后端处理流程使用Java中的Spring框架进行处理

前面页面处理流程

1,Html页面定义File：

2,选择图片并上传:
绑定fileimage控件的change事件：$("#fileimage").bind("change", uploadFileImage);
上传图片:
function uploadFileImage() {
var objUrl = getObjectURL(this.files[0]);
// 上传图片
uploadFile("uploadimage/fileimage", "fileimage", function(result) {

}); 
 }


 //uploadUrl:服务器用于接收图片的接口
 //fileElementID:file控件的id
 //callback:图片上传完成后的回调方法。
 function uploadFile(uploadUrl, fileElementID, callback) {  
$.ajaxFileUpload({
    url : uploadUrl,
    secureuri : false,
    type : 'post',
    fileElementId : fileElementID,
    dataType : 'JSON',
    success : function(data) {
                    //data:服务器返回的结果
        if (data&& callback != null) {
           callback(data);
        }
    },
    error : function(data, status, e) {

    }
});
  }

*显示缩略图:
更新上面uploadFileImage方法为下面代码:
function uploadFileImage() {
var objUrl = getObjectURL(this.files[0]);
// 上传图片
uploadFile("uploadimage/fileimage", "fileimage", function(result) {
// 显示缩略图
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#fileimage_thumbnail").attr("src", objUrl);
}
});
}

后台Java处理流程

1,后台接收图片的方法如下:
@RequestMapping(value = "uploadimage/fileimage")
public void uploadPicture(HttpServletRequest request) {

    try {
        String filePath = uploadFile(request, pictureUploadService);
        if (!Tools.isEmptyString(filePath)) {
            setResult(filePath);
            logHelper.info("图片上传成功...");
        } else {
            setResult(
                    MessageManager.getInstance().getMessage(
                            "pictureuploadfailed"),
                    ResultType.Error);
            logHelper.info("图片上传失败...");
        }
    } catch (IllegalStateException e) {
        logHelper.warn("图片保存失败:" + e.getMessage());
    } catch (IOException e) {
        logHelper.warn("图片保存失败:" + e.getMessage());
    }   
}

2,存储图片处理流程
private String uploadFile(HttpServletRequest request,IUploadFile uploadFile) throws IllegalStateException,
IOException {
String filePath="";

    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
            request.getSession().getServletContext());

    if (multipartResolver.isMultipart(request)) {
        MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;

        Iterator<String> fileNames = multipartHttpServletRequest
                .getFileNames();

        while (fileNames.hasNext()) {
            MultipartFile file = multipartHttpServletRequest
                    .getFile(fileNames.next().toString());

            if (file != null) {
                filePath = uploadFile.uploadFile(file);
                if (!Tools.isEmptyString(filePath)) {
                    setResult(filePath);
                } else {
                    setResult(
                            MessageManager.getInstance().getMessage(
                                    "pictureuploadfailed"),
                            ResultType.Error);
                }
            }
        }
    }

    return filePath;
}

public interface IUploadFile {
public String uploadFile(IMultipartFile multipartFile) throws IllegalStateException, IOException ;

}

@Service
public class PictureUploadService extends BaseService implements IUploadFile {

/**
 * 上传图片
 * @param multipartFile
 *            用户所上传的图片文件
 * @return
 * @throws IllegalStateException
 * @throws IOException
 */
@Override
public String uploadFile(MultipartFile multipartFile) throws IllegalStateException, IOException {
    String relativePath = Helpers.getImageFolderPath();

    String imageSavedPath = IOTools.transferFile(multipartFile,
            ConfigHelper.IMAGE_SAVED_PATH, relativePath);

    logger.info("图片保存路径:" + imageSavedPath);

    return imageSavedPath;
}

}

package com.weijiazhe.utils;

import java.io.File;
import java.io.IOException;
import java.util.Dictionary;

import org.springframework.web.multipart.MultipartFile;

import com.weijiazhe.weijiazheutils.ConfigHelper;

public class IOTools {

/**
 * 转移文件
 * 
 * @param multipartFile
 * @param fileAbsoluteSavedPath
 * @param relativePath
 * @return
 * @throws IllegalStateException
 * @throws IOException
 */
public static String transferFile(MultipartFile multipartFile,
        String fileAbsoluteSavedPath, String relativePath)
        throws IllegalStateException, IOException {
    if (!Tools.isEmptyString(relativePath)) {
        String fileName = Tools.getGuid();
        String prefix = IOTools.getPrefix(multipartFile
                .getOriginalFilename());

        relativePath += "\\" + fileName + prefix;

        String fileSavedPath = fileAbsoluteSavedPath + relativePath;

        File file = new File(fileSavedPath);

        //文件不存在则创建文件.
        if(!file.exists()){
            //String dirName=file.getAbsolutePath();
            //if(file.isDirectory()){
                file.mkdirs();
            //}
            //fileSavedPath+="\\" + fileName + prefix;
            //file=new File(fileAbsoluteSavedPath);
            //file.createNewFile();
        }

        multipartFile.transferTo(file);
    }

    return relativePath;
}

}