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. [转]Membership三步曲之入门篇 - Membership基础示例

    本文转自:http://www.cnblogs.com/jesse2013/p/membership.html Membership三步曲之入门篇 - Membership基础示例   Members ...

  2. JDK环境变量详细讲解

    首先,你应该已经安装了 java 的 JDK 了,笔者安装的是:jdk-8u65-windows-x64 下载地址: http://www.oracle.com/technetwork/java/ja ...

  3. leetcode-Excel Sheet Column Title

    题目: 把数字转化为excel形式的字符表示.示例:1->A 2->B 3->C ... 26->Z 27->AA... 解题思路: 乍一看有点像进制转换题目,不过细想想 ...

  4. UESTC 395 Dynamic Query System --Treap

    题意:让你维护一个集合,有8种操作: 1.  I x  插入一个数 2.  R x 删除x 3.  S 输出总的数个数(集合大小) 4.  L x  查询小于x的数的个数 5.  W k  查询集合中 ...

  5. 杭电OJ——1198 Farm Irrigation (并查集)

    畅通工程 Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可 ...

  6. 网络流-最大流问题 ISAP 算法解释(转自Renfei Song's Blog)

    网络流-最大流问题 ISAP 算法解释 August 7, 2013 / 编程指南 ISAP 是图论求最大流的算法之一,它很好的平衡了运行时间和程序复杂度之间的关系,因此非常常用. 约定 我们使用邻接 ...

  7. .Net程序员学习Linux最简单的方法

    有很多关于Linux的书籍,博客.大多数都会比较“粗暴“的将一大堆的命令塞给读者,从而使很多.NET程序员望而却步.未入其门就路过了. 所以我设想用一种更为平滑的学习方式, 就是在学习命令时,先用纯语 ...

  8. HTML 学习笔记 JavaScript (节点)

    HTML 节点: HTML DOM定义了所有HTML元素的对象和属性 以及访问它们的方法. HTML DOM是关于如何获取 修改 添加 或 删除HTML元素的标准. 在js中通过document这个对 ...

  9. ASP.NET Repeater 绑定 DropDownList Calendar 选择日期

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. html之marquee详解

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法: <marquee ...