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异步上传文件的更多相关文章

  1. 利用ajaxfileupload插件异步上传文件

    html代码: <input type="file" id="imgFile" name="imgFile" /> js代码: ...

  2. ajaxfileupload.js异步上传

    转载:https://www.cnblogs.com/labimeilexin/p/6742647.html jQuery插件之ajaxFileUpload     ajaxFileUpload.js ...

  3. Node.js——异步上传文件

    前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...

  4. JS异步上传文件

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

  5. 关于js异步上传文件

    好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...

  6. 关于JQuery.form.js异步上传文件点滴

    好久没动代码了,前几天朋友委托我帮忙给做几个页面,其中有个注册带图片上传的页面.已之前的经验应该很快就能搞定,没想到的是搞了前后近一天时间.下面就说说异步上传的重要几个点,希望自己下次遇到此类问题的时 ...

  7. vue.js异步上传文件前后端代码

    上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  8. ajaxfileupload.js ajax上传文件(含application/json)

    jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' ...

  9. 使用ajaxfileupload.js实现上传文件功能

    <div class="pictureList"> <div class="pictureItem" id="uploadItem& ...

随机推荐

  1. .Net程序员之Python基础教程学习----判断条件与循环[Fourth Day]

        今天学习Python的判断条件与循环操作. 一. 布尔变量: 在学习判断条件之前必须的了解bool变量,在Python中bool变量与C语言比较类似,与.net差别比较大,其中下面集中情况需要 ...

  2. 希尔排序(c++)

    希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL.Shell于1959年提出而得名. 希尔排序是把记 ...

  3. AC日记——石头剪子布 openjudge 1.7 04

    04:石头剪子布 总时间限制:  1000ms 内存限制:  65536kB 描述 石头剪子布,是一种猜拳游戏.起源于中国,然后传到日本.朝鲜等地,随着亚欧贸易的不断发展它传到了欧洲,到了近现代逐渐风 ...

  4. Java之单例模式

    单例模式: public class Person{ public static Person per//定义一个静态变量,用来储存当前类的对象 private Person()//构造方法私有化 { ...

  5. Win7安装Redis

    首先, 到 https://github.com/MSOpenTech/redis/releases 下载Redis的windows 64bit port zip 解压后放到某个目录下, 例如 c:\ ...

  6. maven buid 导出项目依赖的jar包问题

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-dependency-plugin:2.8:copy-dependencie ...

  7. Cordova - 常用的插件汇总(附插件的安装、查询、更新、删除等命令)

    Hybrid应用比web应用强大之处在于可以使运行在容器中的web内容访问 native APIs.Cordova 提供了许多插件用于调用移动设备上的API. 一,插件相关常用命令   1,查看所有已 ...

  8. C#.NET 大型通用信息化系统集成快速开发平台 4.0 版本 - 独立子系统管理员功能实现

    1: 由于公司一次性要开发10多个子系统,每个子系统都需要有相关的业务部门进行对应.2: 若用集中式管理方式,每个业务部门人员变动,权限变动时,都需要早IT信息中心进行调整,影响工作效率.及时性.3: ...

  9. 矩阵求逆算法及程序实现(C++)

    在做课题时,遇到了求多项式问题,利用了求逆方法.矩阵求逆一般使用简单的算法,还有快速算法 如全选主元高斯-约旦消元法,但本文程序主要写了简单的矩阵求逆算法定义法之伴随矩阵求逆公式如下,其中A可逆: , ...

  10. 我这样理解js里的this

    关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:k ...