利用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="text/javascript">
$(document).ready(function(){
$("#upClick").click(function(){
$.ajaxFileUpload(
{
url:'MyMail/addEnclosure',
secureuri:false,
fileElementId:'enclosure', //文件选择框的id和name要一样的名字
dataType: 'json',
success: function (data, status){
//这里的返回值利用JSON
$('#filePath').val(data['filePath']);
$('#result').html(data['message']);
},error: function (data, status, e){
$('#result').html(data['message']);
}
}
);
});
});
</script>
4、springMVC的controller
/***
* 上传附件
* @return
*/
@RequestMapping("/addEnclosure")
public @ResponseBody String uploadFile(@RequestParam("enclosure") CommonsMultipartFile file){ JSONObject object = new JSONObject();
object.put("filePath", file.getOriginalFilename());10 String returnJson = "";
try {
//使用ajaxfileupload.js异步上传文件,返回值乱码,重新编码处理
returnJson = new String(JSONObject.fromObject(object).toString().getBytes("utf-8"),"iso-8859-1");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
return returnJson;
}
利用ajaxfileupload.js异步上传文件的更多相关文章
- 利用ajaxfileupload插件异步上传文件
html代码: <input type="file" id="imgFile" name="imgFile" /> js代码: ...
- ajaxfileupload.js异步上传
转载:https://www.cnblogs.com/labimeilexin/p/6742647.html jQuery插件之ajaxFileUpload ajaxFileUpload.js ...
- Node.js——异步上传文件
前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...
- JS异步上传文件
直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...
- 关于js异步上传文件
好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...
- 关于JQuery.form.js异步上传文件点滴
好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...
- vue.js异步上传文件前后端代码
上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...
- ajaxfileupload.js ajax上传文件(含application/json)
jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...
- 使用ajaxfileupload.js实现上传文件功能
<div class="pictureList"> <div class="pictureItem" id="uploadItem& ...
随机推荐
- SQL Server With 递归 日期 循环
要实现的效果:查询从Date From 到 To 之间的 所有日期: 示例代码如下: DECLARE @DATE_FROM DATETIME = N'2016-05-16';--N'2015-05-1 ...
- 用PS制作时尚美观的LOGO
今日,在网上看到一篇帖子,介绍了各种时尚美观的六边形LOGO,其中一个吸引了我的目光. 一时技痒,尝试着用PS把它临摹出来 1.新建文档,大小600*600 2.用多边形工具,边数选择6,按住Shif ...
- POJ3321Apple Tree[树转序列 BIT]
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 26995 Accepted: 8007 Descr ...
- 第66课 C++中的类型识别
1. 类型识别 (1)在面向对象中可能出现下面的情况 ①基类指针指向子类对象 ②基类引用成为子类对象的别名 ▲静态类型——变量(对象)自身的类型(定义变量类型时类型或参数类型) ▲动态类型——指针(引 ...
- [Flash 3D] 又是一个难题解决了。(Flash3D在android中运行)
做了一些away3D(4.1.6)+Flash cc,项目比较大,面数多达2000万个,发现电脑还有跑20多帧,可见away3d表现确实相当不错.想把这些东西放到手机上来看,却发现总是白屏,网上搜索了 ...
- JavaScript Date对象 日期获取函数
JavaScript Date对象使用小例子: 运行结果: 总结: 1.尽管我们认为12月是第12个月份,但是JavaScript从0开始计算月份,所以月份11表示12月: 2.nowDate.set ...
- Java 集合系列07之 Stack详细介绍(源码解析)和使用示例
概要 学完Vector了之后,接下来我们开始学习Stack.Stack很简单,它继承于Vector.学习方式还是和之前一样,先对Stack有个整体认识,然后再学习它的源码:最后再通过实例来学会使用它. ...
- Java 集合系列17之 TreeSet详细介绍(源码解析)和使用示例
概要 这一章,我们对TreeSet进行学习.我们先对TreeSet有个整体认识,然后再学习它的源码,最后再通过实例来学会使用TreeSet.内容包括:第1部分 TreeSet介绍第2部分 TreeSe ...
- make的控制函数(error,warning)
make的控制函数 make提供了两个控制make运行方式的函数.通常它们用在Makefile中,当make执行过程中检测到某些错误是为用户提供消息,并且可以控制make过程是否继续. 8.11.1 ...
- Linux 进程详解
Linux内核的七大区间 .进程管理(进程创建,进程的三种状态,进程间的调度,调度算法...) .内存管理(段式管理(Linux所有段都从0开始),页式管理--地址偏移量) .系统调用(C语言库函数的 ...