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. Lucene 4.x Spellcheck使用说明

    Spellcheck是Lucene新版本的功能,在介绍spellcheck之前,我们需要弄清楚Spellcheck支持几种数据源.Spellcheck构造函数需要传入Dictionary接口: pac ...

  2. 2015 Selenium大会

    9月8号到10号三天在俄勒冈州的波特兰召开了Selenium Conference 2015,分享的演讲很多,视频也放出来了,做了下搬运工,传到优酷 简介: A conference that bri ...

  3. SpringMVC学习系列-后记 解决GET请求时中文乱码的问题

    SpringMVC学习系列-后记 解决GET请求时中文乱码的问题 之前项目中的web.xml中的编码设置: <filter> <filter-name>CharacterEnc ...

  4. Android之监听手机软键盘弹起与关闭

    背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...

  5. 对于大量left join 的表查询,可以在关键的 连接节点字段上创建索引。

    对于大量left join 的表查询,可以在关键的 连接节点字段上创建索引. 问题: 大量的left join 怎么优化 select a.id,a.num,b.num,b.pcs,c.num, c. ...

  6. css3属性选择器

  7. Html5的一些引擎使用感触

    记得在2011年的时候,51CTO曾经采访我对H5的看法,因为当时Html5小组和雷友的关系,感觉是一片大火的形式,当时我的看法是:第一盈利模式不清晰,第二硬件跟不上,第三技术不成熟. 第一和第二点很 ...

  8. Easyui Tree方法扩展 - getLevel(获取节点级别)

    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...

  9. Linux Linux程序练习十四(多进程压力测试)

    /* * 题目: * 编程一个基本多进程测试框架,提示用户输入进程数.和每个进程数运行圈数.(fork) * 进行多进程压力测试.(execve) * 要求父进程能监控所有子进程的退出,避免僵尸进程. ...

  10. java 利用JAX-RS快速开发RESTful 服务

    JAX-RS(Java API for RESTful Web Services)同样也是JSR的一部分,详细规范定义见 https://jcp.org/en/jsr/detail?id=311 .从 ...