jquery.uploadify+spring mvc实现上传图片

一、前端页面

1.下载jquery.uploadify

去uploadify官网（http://www.uploadify.com/download/ ）下载压缩包，解压后放在如下路径：

2.html结构

form表单的上传控件部分：

<div class="control-group">
                <label class="control-label" for="coverImage">代表图</label>
                <div class="controls">
                    <input type="hidden" th:field="*{coverImage}">
                    <input class="input-file" id="fileInput" type="file">
                    <img id="previewCoverImage" src="#">
                </div>
            </div>

　　

3.页面引入uploadify

<link rel="stylesheet" th:href="@{/static/uploadify/uploadify.css}”>
<script type="text/javascript" th:src="@{/static/uploadify/jquery.uploadify.js}"></script>

　　

4.自定义上传代码

<script th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function () {
            $("#fileInput").uploadify(
                {
                    'swf': /*[[@{/static/uploadify/uploadify.swf}]]*/,
                    'uploader': /*[[@{/upload/uploadCoverImage}]]*/, //后台action地址
                    'queueID': 'fileQueue',
                    'auto': true,
                    'multi': false,
                    'buttonText': '上传图片',
                    'fileObjName': 'pic', //对应action中的参数字段名称
                    'width': 70,
                    'height': 20,
                    'onUploadSuccess': function (file, data, response) {
                        if (data != null) {
                            $("#coverImage").val(data); //赋值给hidden控件，便于提交form表单
                            $("#previewCoverImage").attr("src",data); //复制给img控件用来预览
                        }
                    }
                });
        });
        /*]]>*/

    </script>

　　

二、站点配置

1.调整springmvc-servlet.xml文件，添加配置支持文件上传

<!-- 支持上传文件 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

　　

2.添加maven依赖

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

　　

三、后台代码

1.controller

@Controller
@RequestMapping("/upload")
public class UploadController {

    @RequestMapping(value = "/uploadCoverImage", method = RequestMethod.POST)
    @ResponseBody
    public String uploadCoverImage(@RequestParam("pic") CommonsMultipartFile pic, HttpServletRequest req, HttpServletResponse response) throws IOException {
        //上传文件信息
        String fileName = pic.getOriginalFilename();
        String fileType = fileName.split("[.]")[1];

        //生成文件信息
        String filePath = req.getSession().getServletContext().getRealPath(FilePathConst.COVER_IMAGE_UPLOAD);
        String uuid = UUID.randomUUID().toString().replace("-", "");
        String uuidFileName = uuid + fileName;

        //保存文件
        File f = new File(filePath + "/" + uuid + "." + fileType);
        FileUtils.uploadFile(pic.getInputStream(), uuidFileName, filePath);

        return SiteConst.SITE_DOMAIN + FilePathConst.COVER_IMAGE_UPLOAD + uuidFileName;
    }
}

　　

2.FileUtils工具类

public class FileUtils {
    public static void uploadFile(InputStream is, String fileName, String filePath) {
        FileOutputStream fos = null;
        BufferedOutputStream bos = null;
        BufferedInputStream bis = null;
        File file = new File(filePath);
        if (!file.exists()) {
            file.mkdirs();
        }

        File f = new File(filePath + "/" + fileName);
        try {
            bis = new BufferedInputStream(is);
            fos = new FileOutputStream(f);
            bos = new BufferedOutputStream(fos);

            byte[] bt = new byte[4096];
            int len;
            while ((len = bis.read(bt)) > 0) {
                bos.write(bt, 0, len);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (null != bos) {
                    bos.close();
                    bos = null;
                }

                if (null != fos) {
                    fos.close();
                    fos = null;
                }
                if (null != is) {
                    is.close();
                    is = null;
                }

                if (null != bis) {
                    bis.close();
                    bis = null;
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}