引入js

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

html

  1. <tr>
  2. <td>附件:</td>
  3. <td>
  4. <input type="hidden" id="insertcyefuji" name="fuji" />
  5. <input type="file" id="uploadcyefuji" name="file" />
  6. </td>
  7. </tr>

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

  1. $('input[id="uploadcyefuji"]').change(function(e){
  2. var formData = new FormData();
  3. formData.append('file', $('#uploadcyefuji')[0].files[0]);
  4. $.ajax({
  5. url: '/fileUpload',
  6. type: 'POST',
  7. cache: false,
  8. data: formData,
  9. processData: false,
  10. contentType: false
  11. }).done(function(res) {
  12. alert("上传成功")
  13. }).fail(function(res) {
  14. alert("上传失败");
  15. });
  16.  
  17. })

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. }

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

  1. Servlet异步上传文件

    这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...

  2. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  3. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

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

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  5. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

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

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  7. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  8. JS异步上传文件

    直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...

  9. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

随机推荐

  1. [远古回忆]发现了以前的一些wow截图 这里也备份一下

    看邮箱里面通知 网易相册24号就停服了..赶紧找到以前的账号登录了进去瞅瞅 看看有什么重要的东西需要备份的 想不到发现了很多惊喜 虽然因为年代久远和网易相册提供的免费服务 很多文件图片和其他资料有接近 ...

  2. IDE - IDEA - 快捷键整理 - 01. Navigation

    1. 概述 工具的熟练程度, 会决定工作效率 总共也就 140 条左右吧 需要讲解吗? 2. ref 1. idea 自带的 ReferenceCard.pdf 3. keymap 1. 文件移动 C ...

  3. python浅析模块,包及其相关用法

    一,模块 什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里面,代码会越来越长,越来越不容易维护. 为了编写可以维护的代码,我们把很多函数分组,分别放到不同额文件,这样,每个文 ...

  4. Python3.6打开EAIDK-610开发板(计算机通用)摄像头拍照并保存

    环境:python3.6 代码: import cv2 import os output_dir ='/home/openailab/Desktop/huahui/came/' i = cap = c ...

  5. Hadoop架构: 流水线(PipeLine)

    该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 流水线(PipeLine),简单地理解就是客户端向DataNode传输数据(Packet)和接收Dat ...

  6. [Fiddler学习] - Mock的简单实现原理及方法

    最近在研究Fidder抓包并做一点测试工作,下面介绍一下Fiddler的实现原理: 简单来说从clent,server端发出来的请求,都需要通过Fiddler进行代理走一遍.如果有任何请求需要做修改, ...

  7. SpringBoot+mongoDB实现id自增

    这段时间给朋友做了一个微信小程序,顺便练习一下spring boot,虽然项目使用的是JPA+MySQL,但是好奇尝试了一下MongoDB实现自增ID,虽然MongoDB很少有自增ID的需求(在分布式 ...

  8. 疯狂python(分享本不错的书)

    网盘链接:https://pan.baidu.com/s/1JDawVe8CT9BsHav5gBZS6Q    提取码vg8k

  9. Vue-表单提交

    template <form @submit.prevent="submitFrom"> <!-- 注册提交事件 .prevent 阻止表单的默认提交行为 --& ...

  10. springmvc实现文件下载

    springmvc实现文件下载 使用springmvc实现文件下载有两种方式,都需要设置response的Content-Disposition为attachment;filename=test2.p ...