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

最新推荐文章于 2024-04-24 09:59:31 发布

Shadow0418

最新推荐文章于 2024-04-24 09:59:31 发布

阅读量6.9k

点赞数

分类专栏： java spring 文章标签：异步 spring mvc

本文链接：https://blog.csdn.net/u010286751/article/details/50133813

版权

java 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

spring

1 篇文章 1 订阅

订阅专栏

1、ajaxfileupload.js

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

2、引入依赖

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

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

 <bean 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("<PRE>", '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre>text</pre>前后缀
                    data = data.replace("</PRE>", '');
                    data = data.replace("<pre>", '');
                    data = data.replace("</pre>", ''); //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
                    if(data.substring(0, 1) == 0){     //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
                        $("img[id='uploadImage']").attr("src", data.substring(2));
                        $('#result').html("图片上传成功<br/>");
                    }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注解
        //上传多个文件时,前台表单中的所有<input type="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;
    }
}

Shadow0418

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用ajaxfileupload.js异步上传文件到服务器

1、ajaxfileupload.js今天研究一下了ajaxfileupload.js，简单的实现一下文件传入服务器的流程。测试环境环境SpringMVC2、引入依赖<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId>
复制链接

扫一扫