springmvc_ajax异步上传文件(基于ajaxfileupload.js)

引入js

  <script th:src="@{/js/ajaxfileupload.js}"></script>

html

<tr>
        <td>附件:</td>
        <td>
             <input type="hidden" id="insertcyefuji"  name="fuji" />
             <input type="file"  id="uploadcyefuji"  name="file" />
        </td>
</tr>

js代码-----选择完文件后自动上传

$(‘input[id="uploadcyefuji"]‘).change(function(e){
              var formData = new FormData();
                formData.append(‘file‘, $(‘#uploadcyefuji‘)[0].files[0]);
                $.ajax({
                    url: ‘/fileUpload‘,
                    type: ‘POST‘,
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false
                }).done(function(res) {
                    alert("上传成功")
                }).fail(function(res) {
                    alert("上传失败");
                });

 })

controller后台代码

 1 /**
 2      * 实现文件上传
 3      * @throws IOException
 4      * @throws IllegalStateException
 5      * */
 6     @RequestMapping(value="fileUpload",method = RequestMethod.POST)
 7     @ResponseBody
 8     public String fileUpload(HttpServletRequest req,MultipartFile file) throws IllegalStateException, IOException{
 9         if(file.getOriginalFilename()==null||file.getOriginalFilename().equals("")){
10             System.err.println("为空++++");
11             return "";
12         }else{
13             String picName = UUID.randomUUID().toString();
14             // 获取文件名
15             String oriName = file.getOriginalFilename();
16                 System.err.println(oriName+"图片名字");
17             // 获取图片后缀
18             String extName = oriName.substring(oriName.lastIndexOf("."));
19                 System.err.println("后缀名字"+extName);
20             if(extName.equals(".jpg") || extName.equals(".JPG")  ||extName.equals(".png") ||  extName.equals(".PNG")){
21                 String path = req.getSession().getServletContext().getRealPath("/");
22                 System.out.println("path="+path);
23
24                 file.transferTo(new File(path+"upload/"+picName + extName));
25                 //user.setUsername(picName + extName);
26                 //m.addAttribute("fileName"+count, picName + extName);
27                 //count--;
28                 //list.add(user);
29
30                 // 设置图片名到商品中
31                 System.err.println("上传图片完成");
32                 return "上传成功";
33             }else {
34                 System.err.println("格式不对");
35                 return "格式不对";
36
37             }
38         }
39 }

原文地址:https://www.cnblogs.com/chenlove/p/9450639.html

时间: 2024-10-13 07:28:31

springmvc_ajax异步上传文件(基于ajaxfileupload.js)的相关文章

利用ajaxfileupload.js异步上传文件

1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="enclosure"> <button id="upClick" >上传</button> 注意这里的input控件的id和name必须一致:这样在后台利用springMVC接受文件的时候能对应起来: 3.JS代码 <script type=&q

使用ajaxfileupload.js文件异步上传文件

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="

使用ajaxfileupload.js异步上传文件到Servlet

前段时间帮同学做的毕业设计..好吧又是帮人做...需要上传文件,在这里使用了ajaxfileupload.js进行异步的上传文件到Servlet  ,后台保存了文件以后通过JSON返回文件路径到前端,好了废话不多说,直接上代码了... 前端页面比较简单 <input maxlength=16 type=file name="pic" id="pic" size=16 />  <input type="button" id=&qu

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu

JQuery插件ajaxFileUpload 异步上传文件(PHP版)

太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.

JS异步上传文件

直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:"1"} **maxSize:文件最大值(单位M) * img:"#qrimg", **callback:回调函数(可空) **beforeSend:上传前函数(可空) */ function Upload(option) { var fd = new FormData(

关于js异步上传文件

好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件还有别的信息需要交互,跟后端商量后决定文件单独上传,获取到服务器端返回的文件地址在和表单一起提交.这里就需要异步上传文件. 在网上扒了扒相关的内容,发现还真不少,阮一峰老师的这篇文章(文件上传的渐进式增强)就介绍的很具体,下面就谈谈自己在实战中遇到的一些问题的感受吧. 先看看效果,实现了哪些功能 (