使用ajaxfileupload.js异步上传文件到服务器

1、ajaxfileupload.js

今天研究一下了ajaxfileupload.js,简单的实现一下文件传入服务器的流程。测试环境环境SpringMVC


2、引入依赖

<dependency>
            <groupId>commons-fileuploadgroupId>
            <artifactId>commons-fileuploadartifactId>
            <version>1.3version>
        dependency>

3、在spring配置中配置视图解析器

 id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

4、页面index.jsp

<%--
  Created by IntelliJ IDEA.
  User: shadow
  Date: 2015/11/28
  Time: 21:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>title>
    <script src="../js/jquery-1.11.3.min.js">script>
    <script src="../js/ajaxfileupload.js">script>
    <script type="text/javascript">
        function ajaxFileUpload(){
            var uname = "shadow";
            //开始上传文件时显示一个图片,文件上传完成将图片隐藏
            //$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
            //执行上传文件操作的函数
            $.ajaxFileUpload({
                //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
                url:'/test/fileUpload?uname=' + uname,
                secureuri:false,                       //是否启用安全提交,默认为false
                fileElementId:'myBlogImage',           //文件选择框的id属性
                dataType:'text',                       //服务器返回的格式,可以是json或xml等
                success:function(data, status){        //服务器响应成功时的处理函数
                   /* data = data.replace("
", '');  //ajaxFileUpload会对服务器响应回来的text内容加上
text
前后缀 data = data.replace("
", ''); data = data.replace("
", '');
                    data = data.replace("
", ''); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath] if(data.substring(0, 1) == 0){ //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述) $("img[id='uploadImage']").attr("src", data.substring(2)); $('#result').html("图片上传成功
"); }else{ $('#result').html('图片上传失败,请重试!!'); }*/
$('#result').html('修改头像成功' + data); }, error:function(data, status, e){ //服务器响应失败时的处理函数 $('#result').html('图片上传失败,请重试!!'); } }); }
script> head> <body> <div id="result">div> <input type="file" id="myBlogImage" name="myfiles"/> <input type="button" value="上传图片" onclick="ajaxFileUpload()"/> body> html>

5、后台接受前端传入的文件

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by shadow on 2015/11/29.
 */
@Controller
@RequestMapping("/test")
public class FileUploadController {

    @RequestMapping(value = "/fileUpload")
    public String addUser(@RequestParam("uname") String uname, @RequestParam MultipartFile[] myfiles,
                          HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/plain; charset=UTF-8");
        System.out.println("上传用户:" + uname);
        //设置响应给前台内容的PrintWriter对象
        PrintWriter out = response.getWriter();
        //上传文件的原名(即上传前的文件名字)
        String originalFilename = null;
        //如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解
        //如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解
        //上传多个文件时,前台表单中的所有"file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件
        for (MultipartFile myfile : myfiles) {
            if (myfile.isEmpty()) {
                out.print("1`请选择文件后上传");
                /*out.flush();*/
                return null;
            } else {
                originalFilename = myfile.getOriginalFilename();
                System.out.println("文件原名: " + originalFilename);
                System.out.println("文件名称: " + myfile.getName());
                System.out.println("文件长度: " + myfile.getSize());
                System.out.println("文件类型: " + myfile.getContentType());

                //保存
                System.out.println("执行保存到服务器");
            }
        }
        out.write("success");
        return null;
    }
}

你可能感兴趣的:(java,spring)