上传图片功能代码说明

说明：样式不一定美观，主要说明上传逻辑和代码细节说明

改进后：

【页面效果】

 【jsp页面】

说明：

1：上传核心的两个input   一个name=photourl  一个name=projectUpload；   <img>用于回显图片 

2：name=photourl的input样式说明： “hidden="hidden" type="hidden" 如果不添加的话 会出现如下效果：影响美观

     name=projectUpload样式说明： 事件必须是onchange（）事件 不要用处onclick事件，   

     style=" 73px; overflow: hidden;padding-left: 20px;"中width的定义目的为了隐藏”未选择任何文件“如图

  overflow没有调试出用处先保留  padding-left用于美观调间距

                            <tr>
                                <td class="in-lab" width="15%">成果主图:</td>
                                <td class="in-ctt" colspan="3">
                                <input name="photourl" id="photourl" value="${bean.photourl}" hidden="hidden" type="hidden"/>
                                <div class="uploadBox">
                                    <input type="file" id="projectUpload" name="projectUpload" onchange="upload();" 
                                            style=" 73px; overflow: hidden;padding-left: 20px;"/>
                                    (请上传规格为260*188像素大小的图片)
                                </div>
                                <div class="imageTips">
                                    <img style=" 120px; height: 120px" src="${bean.photourl}" />
                                </div>
                                </td>
                        </tr>

js代码说明：

1：upload()方法调用uploadImg()方法

2：projectUpload参数是往后台传递的参数  需要与input中的name=projectUpload的值一致

3：id为photourl的input用于接受ajax返回的图片上传路径；

4：class为imageTips的div用于显示上传的图片，因为此处只上传一个图片  所以只显示一个图片需要清空之前的url  否则会出现显示多个图片的情形

//成果主图
      function upload(){
         uploadImg();
     }
    function uploadImg(){
    //loading
    $("#loading").ajaxStart(function() {
        $(this).show();
    }).ajaxComplete(function() {
        $(this).hide();
    });
    var elementIds=["flag"]; //flag为id、name属性名
    $.ajaxFileUpload({
        url: '/file/upload.jspx',//接口url
        type: 'post',
        secureuri: false, //一般设置为false
        fileElementId: 'projectUpload', // 上传文件的id、name属性名
        dataType: 'text', //返回值类型，一般设置为json、application/json
        elementIds: elementIds, //传递参数到服务器
        success: function(data, status){
            
            var temp =  $.parseJSON(data);
            var fileUrl = temp.fileUrl;
            $("#photourl").val(fileUrl);
            $(".imageTips").empty();             
            $(".imageTips").append("<img height="100" width="100" src=""+fileUrl+""></img> ");
            alert("上传成功！");
        },
        error: function(data, status, e){ 
            alert(e);
        }
    });
}

后台函数：

1：该后台函数已经封装了很多函数，所以只是看下逻辑

2：参数名为projectUpload

    @RequestMapping( value = "/file/upload.jspx", method = RequestMethod.POST )
    public void avatarUpload( @RequestParam( value = "projectUpload", required = false ) MultipartFile file,
            HttpServletRequest request, HttpServletResponse response, org.springframework.ui.Model modelMap ) {
        JsonMapper mapper = new JsonMapper();
        UploadResult result = new UploadResult();
        try {
            doAvatarUpload( file, result, request, response );
        }
        catch( Exception e ) {
            logger.error( "upload avatar image error.", e );
            result.setError( e.getMessage() );
        }
        String json = mapper.toJson( result );
        logger.debug( json );
        Servlets.writeHtml( response, json );
        return;
    }

【真正上传图片函数】

    private void doAvatarUpload( MultipartFile file, UploadResult result, HttpServletRequest request, HttpServletResponse response )
            throws Exception {
        // 文件是否存在
        if( !validateFile( file, result ) ) {
            return;
        }
        Site site = Context.getCurrentSite( request );
        User user = Context.getCurrentUser( request );

        String origFilename = file.getOriginalFilename();
        String ext = FilenameUtils.getExtension( origFilename ).toLowerCase();
        GlobalUpload gu = site.getGlobal().getUpload();
        // 后缀名是否合法
        if( !validateExt( ext, Uploader.IMAGE, gu, result ) ) {
            return;
        }
        BufferedImage buffImg = ImageIO.read( file.getInputStream() );

        PublishPoint point = user.getGlobal().getUploadsPublishPoint();
        FileHandler fileHandler = point.getFileHandler( pathResolver );
        String fileName = "project_" + System.currentTimeMillis() + "." + ext;
        String pathname = "/project/" + user.getProjectId() + "/" + fileName;
        String urlPrefix = point.getUrlPrefix();
        String fileUrl = urlPrefix + pathname;
        // 一律存储为jpg
        fileHandler.storeImage( buffImg, ext, pathname );
        result.setFileUrl( fileUrl );
        result.setFileName( fileName );
    }

 【json转换类  还没时间研究】

package com.jspxcms.common.util;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.SimpleTimeZone;

import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.fasterxml.jackson.annotation.JsonInclude.Include;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.fasterxml.jackson.databind.util.JSONPObject;

/**
 * Json转换类
 * 
 * @author liufang
 * 
 */
public class JsonMapper {

    private static Logger logger = LoggerFactory.getLogger(JsonMapper.class);

    private ObjectMapper mapper;

    public JsonMapper() {
        this(null);
    }

    public JsonMapper(Include include) {
        mapper = new ObjectMapper();
        // 设置输出时包含属性的风格
        if (include != null) {
            mapper.setSerializationInclusion(include);
        }
        mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        // 设置输入时忽略在JSON字符串中存在但Java对象实际没有的属性
        mapper.disable(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
    }

    /**
     * 创建只输出非Null且非Empty(如List.isEmpty)的属性到Json字符串的Mapper,建议在外部接口中使用.
     */
    public static JsonMapper nonEmptyMapper() {
        return new JsonMapper(Include.NON_EMPTY);
    }

    /**
     * 创建只输出初始值被改变的属性到Json字符串的Mapper, 最节约的存储方式，建议在内部接口中使用。
     */
    public static JsonMapper nonDefaultMapper() {
        return new JsonMapper(Include.NON_DEFAULT);
    }

    /**
     * Object可以是POJO，也可以是Collection或数组。 如果对象为Null, 返回"null". 如果集合为空集合, 返回"[]".
     */
    public String toJson(Object object) {

        try {
            return mapper.writeValueAsString(object);
        } catch (IOException e) {
            logger.warn("write to json string error:" + object, e);
            return null;
        }
    }

    /**
     * 反序列化POJO或简单Collection如List<String>.
     * 
     * 如果JSON字符串为Null或"null"字符串, 返回Null. 如果JSON字符串为"[]", 返回空集合.
     * 
     * 如需反序列化复杂Collection如List<MyBean>, 请使用fromJson(String,JavaType)
     * 
     * @see #fromJson(String, JavaType)
     */
    public <T> T fromJson(String jsonString, Class<T> clazz) {
        if (StringUtils.isEmpty(jsonString)) {
            return null;
        }

        try {
            return mapper.readValue(jsonString, clazz);
        } catch (IOException e) {
            logger.warn("parse json string error:" + jsonString, e);
            return null;
        }
    }

    /**
     * 反序列化复杂Collection如List<Bean>, 先使用函數createCollectionType构造类型,然后调用本函数.
     * 
     * @see #createCollectionType(Class, Class...)
     */
    @SuppressWarnings("unchecked")
    public <T> T fromJson(String jsonString, JavaType javaType) {
        if (StringUtils.isEmpty(jsonString)) {
            return null;
        }

        try {
            return (T) mapper.readValue(jsonString, javaType);
        } catch (IOException e) {
            logger.warn("parse json string error:" + jsonString, e);
            return null;
        }
    }

    /**
     * 構造泛型的Collection Type如: ArrayList<MyBean>,
     * 则调用constructCollectionType(ArrayList.class,MyBean.class)
     * HashMap<String,MyBean>, 则调用(HashMap.class,String.class, MyBean.class)
     */
    public JavaType createCollectionType(Class<?> collectionClass,
            Class<?>... elementClasses) {
        return mapper.getTypeFactory().constructParametricType(collectionClass,
                elementClasses);
    }

    /**
     * 當JSON裡只含有Bean的部分屬性時，更新一個已存在Bean，只覆蓋該部分的屬性.
     */
    @SuppressWarnings("unchecked")
    public <T> T update(String jsonString, T object) {
        try {
            return (T) mapper.readerForUpdating(object).readValue(jsonString);
        } catch (JsonProcessingException e) {
            logger.warn("update json string:" + jsonString + " to object:"
                    + object + " error.", e);
        } catch (IOException e) {
            logger.warn("update json string:" + jsonString + " to object:"
                    + object + " error.", e);
        }
        return null;
    }

    /**
     * 輸出JSONP格式數據.
     */
    public String toJsonP(String functionName, Object object) {
        return toJson(new JSONPObject(functionName, object));
    }

    /**
     * 設定是否使用Enum的toString函數來讀寫Enum, 為False時時使用Enum的name()函數來讀寫Enum, 默認為False.
     * 注意本函數一定要在Mapper創建後, 所有的讀寫動作之前調用.
     */
    public void enableEnumUseToString() {
        mapper.enable(SerializationFeature.WRITE_ENUMS_USING_TO_STRING);
        mapper.enable(DeserializationFeature.READ_ENUMS_USING_TO_STRING);
    }

    /**
     * 支持使用Jaxb的Annotation，使得POJO上的annotation不用与Jackson耦合。
     * 默认会先查找jaxb的annotation，如果找不到再找jackson的。
     */
    // public void enableJaxbAnnotation() {
    // JaxbAnnotationModule module = new JaxbAnnotationModule();
    // mapper.registerModule(module);
    // }

    /**
     * 取出Mapper做进一步的设置或使用其他序列化API.
     */
    public ObjectMapper getMapper() {
        return mapper;
    }
}

【结果类  有时间研究】

package com.jspxcms.common.upload;

import java.util.Date;
import java.util.Locale;

import org.springframework.context.MessageSource;

public class UploadResult {
    /**
     * 错误状态码
     */
    public static final int ERROR_STATUS = 500;

    private int status = 0;
    private String message;
    private String fileUrl;
    private String fileName;
    private long fileLength;
    private String fileExtension;
    private String pdfUrl;
    private String swfUrl;
    private int fileId;

    private Date   time;
    private MessageSource messageSource;
    private Locale locale;

    public UploadResult() {
    }

    public UploadResult(String fileUrl, String fileName, String fileExtension,
            long fileLength) {
        set(fileUrl, fileName, fileExtension, fileLength);
    }

    public void setMessageSource(MessageSource messageSource, Locale locale) {
        this.messageSource = messageSource;
        this.locale = locale;
    }

    public void set(String fileUrl, String fileName, String fileExtension,
            long fileLength) {
        this.fileUrl = fileUrl;
        this.fileName = fileName;
        this.fileExtension = fileExtension;
        this.fileLength = fileLength;
    }

    public void set(Integer fileId, String fileUrl, String fileName, String fileExtension,
            long fileLength, String pdfUrl, String swfUrl) {
        this.fileId = fileId;
        this.fileUrl = fileUrl;
        this.fileName = fileName;
        this.fileExtension = fileExtension;
        this.fileLength = fileLength;
        this.pdfUrl = pdfUrl;
        this.swfUrl = swfUrl;
    }

    public void setError(String message) {
        this.status = ERROR_STATUS;
        this.message = message;
    }

    public void setErrorCode(String code) {
        setErrorCode(code, null);
    }

    public void setErrorCode(String code, String[] args) {
        this.status = ERROR_STATUS;
        setCode(code, args);
    }

    public void setCode(String code) {
        setCode(code, null);
    }

    public void setCode(String code, String[] args) {
        if (messageSource != null && locale != null) {
            setMessage(messageSource.getMessage(code, args, code, locale));
        } else {
            this.message = code;
        }
    }

    public boolean isError() {
        return status >= ERROR_STATUS;
    }

    public boolean isSuccess() {
        return !isError();
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public String getFileUrl() {
        return fileUrl;
    }

    public void setFileUrl(String fileUrl) {
        this.fileUrl = fileUrl;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public long getFileLength() {
        return fileLength;
    }

    public void setFileLength(long fileLength) {
        this.fileLength = fileLength;
    }

    public String getFileExtension() {
        return fileExtension;
    }

    public void setFileExtension(String fileExtension) {
        this.fileExtension = fileExtension;
    }

    public String getPdfUrl() {
        return pdfUrl;
    }

    public void setPdfUrl(String pdfUrl) {
        this.pdfUrl = pdfUrl;
    }

    public String getSwfUrl() {
        return swfUrl;
    }

    public void setSwfUrl(String swfUrl) {
        this.swfUrl = swfUrl;
    }

    public Date getTime() {
        return time;
    }

    public void setTime(Date time) {
        this.time = time;
    }

    public int getFileId() {
        return fileId;
    }

    public void setFileId(int fileId) {
        this.fileId = fileId;
    }

    
}