上传图片回显(上传到服务器)

No.1 :首先,在pom文件中导入依赖:

<!--文件上传 -->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.2</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.2</version>
    </dependency>

No.2 :在SpringMVC.xml中配置,对文件上传进行解析:

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--文件上传大小-->
        <property name="maxUploadSize" value="10240000"/>
        <!--设置字符编码格式-->
        <property name="defaultEncoding" value="utf-8"/>
    </bean>

No.3 :在前段页面写页面上传:

<form enctype="multipart/form-data" id="form">
    文件<input type="file" id="file" name="file" onchange="upload()">
</form>
<img id="img" src="" alt="美图">
<script type="text/javascript" src="/Js/jquery.js"></script>
<script>
    // 开始上传
    function upload() {
        // 获得表单对象
        var formData = new FormData($("#form")[0]);

        // 异步上传
        $.ajax({
            url:"http://localhost:8080/ajax/upload.do",
            type:"post",
            data:formData,
            async:false,
            cache:false,
            contentType:false,
            processData:false,
            success:function (data) {
                if (data.code == 200) {
                    $("#img").attr("src",data.data);
                }else{
                    alert("上传失败1");
                }
            },
            error:function () {
                alert("上传失败2");
            }
        });

    }
</script>

No.4 :在后台进行文件上传,返回路径

@RequestMapping("/upload")
@ResponseBody
public ResultObject upload(HttpServletRequest request) throws IOException {
    // 将请求强转为[多部件请求对象]
    MultipartHttpServletRequest mhReq = (MultipartHttpServletRequest) request;

    // 获得文件对象,此处要与前端页面的name属性值保持一致
    MultipartFile file = mhReq.getFile("file");
    String filename = this.createFileName(file.getOriginalFilename( ));
    System.out.println("文件名: "+filename );

    // 上传至服务器路径
    ServletContext servletContext = request.getServletContext( );
    // 获得文件在服务器的项目上的真实路径
    String realPath = servletContext.getRealPath("/upload");
    File parent = new File(realPath);
    if (!parent.exists()) {
        parent.mkdir();
    }

    File targetFile = new File(parent,filename);
    // 开始上传
    file.transferTo(targetFile);
    System.out.println("上传完毕" );
    return new ResultObject(200,"成功","/upload/"+filename);
}

public String createFileName(String oldname) {
    // 获得老文件的后缀
    String[] split = oldname.split("\\.");
    String suffix = split[1];

    // 生成随机数:方案1: 当前时间毫秒值
    // long time = new Date( ).getTime( );
    // String newfilename = time+"."+suffix;

    // 方案二: 生成随机数
    String uuid = UUID.randomUUID( ).toString( );
    return uuid+"."+suffix;
}

No.5 :最后测试即可