利用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& ...
随机推荐
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- 偷懒的一天-jQuery之事件与应用
hi 睡得恍恍惚惚不知精神为何物了 1.jQuery -----事件与应用----- ----页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构 ...
- 32-bit Assembly on x86_64 Linux (Use Nasm and ld&gcc)
Assembly on x86_64 Linux Some instructions in Intel assembly set are invalid in x86_64 env. e.g. aaa ...
- ZBrush中怎样对遮罩进行反选
通过对ZBrush的学习,我们知道了如何手动创建遮罩,手动创建遮罩相对来说是最简单有效的方法,在某些特定的使用场合会起到事半功倍的效果.创建遮罩我们可以结合Ctrl键在物体保持编辑的状态下来执行,您可 ...
- 《Python核心编程》部分错误纠正(勘误表)(持续更新)
Chapter 3: 例3-1 makeTextFile.py #!/usr/bin/env python 'makeTextFile.py' import os ls = os.linesep #g ...
- VS 代码Diff 之Beyone Compare
前提条件 机器已安装 beyone compared软件和 visual svn for vs 插件. 在VS中集成SVN,我推荐使用 visual svn扩展. visual svn 官网:http ...
- [No000026]365种创业、办公、和生活成长的精华资源
只需要具备以下技能,人人都可以成为企业家:经得起失败的考验,思维活跃,新点子不断,能够脚踏实地把新点子转化为产品,并在这个过程中坚持不懈,百折不挠,即使跌倒了,也要及时从失败中学习,迅速投入到下一次冒 ...
- 已Access为支持,书写一个C#写入的记录的方案
/// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称 ...
- 修复ext4日志(jbd2)bug( Ext4 文件系统有以下 Bug)
from:http://blog.donghao.org/2013/03/20/%E4%BF%AE%E5%A4%8Dext4%E6%97%A5%E5%BF%97%EF%BC%88jbd2%EF%BC% ...
- 转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...