码迷,mamicode.com
首页 > 编程语言 > 详细

SpringMVC + AJAX 实现多文件异步上传

时间:2018-12-25 23:35:12      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:htm   按钮   映射   erro   保存   作者   request   地址   exce   

转自:https://www.jianshu.com/p/f3987f0f471f

今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能。基本的代码还是沿用上篇文章中所用到的项目,需要的朋友可以点击前面的链接查看。在这里只贴出关键代码。

首先我们要准备一个 JS 文件,即:ajaxfileupload.js,它需要用到 jQuery,所以我们还需要准备 jQuery 的库,两个文件在文末尾都有链接提供下载。

JSP 关键代码:

<li>
    <div>
    <input type="file" id="file1" name="imgFile" /><span class="uploadStatus"></span>
    </div>
    <div>
    <input type="file" id="file2" name="imgFile" /><span class="uploadStatus"></span>
    </div>
    <input type="button" onclick="ajaxUpload();" value="上传文件"/><br />
</li>

两个 file input 标签的 name 是一致的“imgFile”,方便 SpringMVC 在 controller 层接收。每个 input 标签后面跟一对 span 标签,用于显示上传结果。
最后提供一个 button 按钮,点击事件 onclick 执行下面我们即将写的 JS 函数。

JS 关键代码:

<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
<script src="js/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
// 多文件异步上传
function ajaxUpload(){
    $("input[type=file]").each(function(){
    var fileEleId = $(this).attr("id");
    // 单个文件的异步上传
    $.ajaxFileUpload({
        url : ‘user/ajaxUpload‘, // 用于文件上传的服务器端请求地址
        fileElementId : fileEleId, // 对应文件上传标签的 id 属性
        type : ‘post‘,
        dataType : ‘text‘, //返回值类型
        success : function(data, status) {
        document.getElementById(fileEleId).nextSibling.innerHTML ="上传成功";
        },
        error : function(data, status, e) {
        document.getElementById(fileEleId).nextSibling.innerHTML ="上传失败";
        }
    });
    });
}
</script>

在循环中引用了 $.ajaxFileUpload 方法,这就是用来异步上传文件用的方法啦!看结构是不是与 jQuery 的 $.ajax 很像呢?需要注意的是 fileElementId 这个参数,用于指定即将上传文件的 input file 的标签 ID。最后在 success 函数中指定回传状态的显示结果就可以了。JSP 部分的代码到此结束,是不是很简单呢!

然后再来看对应 Controller 层代码,我们接着在上篇文章中用到的 UserController 类中写映射方法。
Java 代码:

    /**
     * 文件异步上传请求处理
     * @param request
     * @return 上传结果:success、failed
     */
    @RequestMapping(value = "ajaxUpload", method = RequestMethod.POST)
    public @ResponseBody
    String ajaxUpload(HttpServletRequest request) {
        MultipartHttpServletRequest multipartRequest 
                = (MultipartHttpServletRequest) request;
        // 获取input file对应的 name 的文件
        MultipartFile mFile = multipartRequest.getFile("imgFile"); 
        String path = "D:\\testFile\\"; // 保存的文件位置
        String fileName = mFile.getOriginalFilename();
        // 上传的图片所保存在服务器上的位置
        String outPath = path + fileName; 
        try(OutputStream outputStream = new FileOutputStream(outPath);
            InputStream inputStream = mFile.getInputStream();){
            byte[] buffer = new byte[4096];
            int length = 0;
            while((length = inputStream.read(buffer)) != -1){
                outputStream.write(buffer, 0, length);
            }
        } catch (IOException ioe){
            logger.info("File Upload Exception...", ioe);
            return "failed";
        }
        return "success";
    }

这样就OK了!
当然了,文件上传好了之后,我们还需要记录保存文件的 URL 路径到数据库中,有一个比较好的思路:将保存文件的URL返回给前端 JSP,然后在 JSP 上创建 hidden 隐藏表单域,将 URL 填写到 隐藏表单域中,提交表单时,直接传递 URL 给后端保存即可。



作者:uzip柚子皮
链接:https://www.jianshu.com/p/f3987f0f471f
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

SpringMVC + AJAX 实现多文件异步上传

标签:htm   按钮   映射   erro   保存   作者   request   地址   exce   

原文地址:https://www.cnblogs.com/sharpest/p/10176943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!