webuploader+springMVC上传

前阵子完成了一个上传图片的中间服务。

一直没时间整理。今天把业务、技术都整理一下

思路：

每个web项目几乎都会有上传图片的功能。 如果每次都去copy
之前的代码，会显得很重复。 如果把 前端上传图片以及后端上传图片封装成一个服务。在开发其他项目。直接调用就好了。 这样效率也会提高。

技术架构：
前端 webuploader
后端 springMVC

业务流程：
1、用户每次上传到临时区。
2、真正提交表单的时候。 从临时区复制到正式区
3、每天凌晨3点清空临时区的数据

废话不多说了。 贴代码。

webuploader简单的代码，需要什么CSS、JS我就不贴了。 自己百度吧。 直接贴我的封装

imgUpload就是封装的方法。

前端代码：

如何调用

要注意的是 id名字需要与初始化的ID值 _前面的名字一致

//html代码
 <div id="insertImg_btn">
    <img  src="../resources/img/tianjiatupian.png" id="insertImg_img">
</div>
// 初始化  
imgUpload("insertImg");

//回调方法
function insertImg_callBack(data){
    insertOfferImg = data.name;
}

JS代码：

function imgUpload(imgId){
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: false,
        // swf文件路径
        swf:  '../resources/yunxinImgUpload/Uploader.swf',
        // 文件接收服务端。
        server: 'http://img01.iambuyer.com/imgup/upLoad/fileUpload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#'+imgId+"_btn",
        //选择拖拽容器
        /*dnd: '#uploader-demo',*/
        //粘贴截图的图片
        paste: document.body,
        //拖拽功能开启
        disableGlobalDnd: true,
        //分片处理大图片 - 暂时关闭
        //chunked: true,
        formData: {
            systemName: "iambuyer"
        },
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'   //修改这行
        }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            $("#"+imgId+"_img").attr( 'src', src );
        }, 100, 100 );
        uploader.upload();
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            percent = $li.find('.progress span');

        // 避免重复创建
        if ( !percent.length ) {
            percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
        }
        percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ,data) {
        // $("#"+imgId+"_hidden").val(data.name);
        doCallback(eval(imgId+"_callBack"),[data]);
    });

    function doCallback(fn,args)
    {
        fn.apply(this, args);
    }

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');
        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
}

后端代码

//springMVC 配置文件

    <!-- 上传文件拦截，设置最大上传文件大小   10M=10*1024*1024(B)=10485760 bytes -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760" />
    </bean>

web.xml 配置跨域

    <!-- Spring分发器  -->
    <servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:servlet/servlet-context.xml</param-value>
        </init-param>

        <!--增加跨域的支持-->
        <init-param>
            <param-name>dispatchOptionsRequest</param-name>
            <param-value>true</param-value>
        </init-param>

        <load-on-startup>1</load-on-startup>
    </servlet>

//springMVC

//处理第一次OPTIONS验证请求
    @RequestMapping(value="/fileUpload", method = RequestMethod.OPTIONS)
    public void webUploader(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setHeader("Access-Control-Allow-Credentials", "false");
        response.setHeader("Access-Control-Allow-Origin", "*"); //跨域地址
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
        response.setContentType("application/json");
        response.setCharacterEncoding("utf-8");
    }





    /**
     *图片上传_临时区域 upload_bak
     * @param id
     * @param size
     * @param type
     * @param file
     * @param request
     */
    @RequestMapping(value = "/fileUpload",method = RequestMethod.POST)
    @ResponseBody
    public Object fileUpload(String systemName,String id, String name, String size, String type, @RequestParam("file")MultipartFile file, HttpServletRequest request, HttpServletResponse response){
        //设置跨域
        response.setHeader("Access-Control-Allow-Credentials", "false");
        response.setHeader("Access-Control-Allow-Origin", "*"); //跨域地址
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
        response.setContentType("application/json");
        response.setCharacterEncoding("utf-8");
        try {
            return  uploadService.uploadImg(systemName,id,name,size,type,file,request);
        } catch (Exception e) {
            e.printStackTrace();
            return ApiUtil.getFail();
        }
    }

具体业务代码就不写了

拿到 MultipartFile 进行处理就好了。