引入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后台代码

 /**
* 实现文件上传
* @throws IOException
* @throws IllegalStateException
* */
@RequestMapping(value="fileUpload",method = RequestMethod.POST)
@ResponseBody
public String fileUpload(HttpServletRequest req,MultipartFile file) throws IllegalStateException, IOException{
if(file.getOriginalFilename()==null||file.getOriginalFilename().equals("")){
System.err.println("为空++++");
return "";
}else{
String picName = UUID.randomUUID().toString();
// 获取文件名
String oriName = file.getOriginalFilename();
System.err.println(oriName+"图片名字");
// 获取图片后缀
String extName = oriName.substring(oriName.lastIndexOf("."));
System.err.println("后缀名字"+extName);
if(extName.equals(".jpg") || extName.equals(".JPG") ||extName.equals(".png") || extName.equals(".PNG")){
String path = req.getSession().getServletContext().getRealPath("/");
System.out.println("path="+path); file.transferTo(new File(path+"upload/"+picName + extName));
//user.setUsername(picName + extName);
//m.addAttribute("fileName"+count, picName + extName);
//count--;
//list.add(user); // 设置图片名到商品中
System.err.println("上传图片完成");
return "上传成功";
}else {
System.err.println("格式不对");
return "格式不对"; }
}
}

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. Ubuntu18.04安装caffe python3.6 opencv3.2 CPU

    设置ubuntu的softwares&updates的源为国内源,这样会提高下载速度. 如果是安装python相关库,为提高速度使用: pip3 install 要下载的库 -i https: ...

  2. Git - 01. git config

    1. 概述 管理 git 配置文件命令 配置算是 git 的 meta 大概了解下就行 写这个的原因, 是因为 安装 的时候需要配置 用户名 和 密码 这个操作本质上, 是对属性的配置 先简单知道下操 ...

  3. yii2关闭(开启)csrf的验证

    (1)全局使用,我们直接在配置文件中设置enableCookieValidation为true request => [ 'enableCookieValidation' => true, ...

  4. KFC 小猪短租

    # 分析肯德基门店信息 import requests,json post_url = 'http://www.kfc.com.cn/kfccda/ashx/GetStoreList.ashx?op= ...

  5. 将项目打成war包并用tomcat部署的方法,步骤及注意点

    部署的遇到第一个问题,就是tomcat和jdk的环境问题: 首先 理解为啥要关注这二者的环境呢?他们还是有关系的–tomcat 作为比较流行的java Web服务器也是用java来实现的一个比较大的软 ...

  6. 私域流量&公域流量

    所谓私域流量,指的是个人拥有完全的支配权的账号所沉淀的粉丝.客户.流量,可以直接触达的,多次利用的流量.比如说QQ号.微信号.社群上的粉丝或者顾客,就属于是私域流量. 而与之相对的,就是所谓的公域流量 ...

  7. 如何通过Docker搭建一个swoft开发环境

    本篇文章给大家分享的内容是关于如何通过Docker搭建一个swoft开发环境 ,内容很详细,有需要的朋友可以参考一下,希望可以帮助到你们. Swoft首个基于 Swoole 原生协程的新时代 PHP ...

  8. 吴裕雄 python 人工智能——智能医疗系统后台用户注册、登录和初诊简约版代码展示

    #用户注册.登录模块 #数据库脚本 CREATE TABLE usertable( userid number(8) primary key not null , username varchar(5 ...

  9. tab 切换 和 BottomNavigationBar 自定义 底部导航条

    BottomNavigationBar 组件    BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Scaffold ...

  10. MYSQL命令练习及跳过数据库密码进行密码重新设置

        2.看当前所有数据库:show databases; 3.进入mysql数据库:use mysql; 4.查看mysql数据库中所有的表:show tables; 5.查看user表中的数据: ...