JavaScript使用Ajax上传文件的示例代码


Posted in Javascript onAugust 10, 2017

本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下:

实现文件的上传主要有两种方式:

使用form表单提交上传

html代码如下:

<form id="uploadForm" enctype="multipart/form-data">
  <input id="file" type="file" name="file"/>
  <button id="upload" type="button">上传</button>
</form>

此时的JavaScript代码如下:

var formData = new FormDate($('#uploadForm')[0]);

 $.ajax({
        url: 'http://10.10.2.254:8080/file/associateupload',
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success:function(res){
            console.log(res);
        }
    });

需要注意:

  1. processData设置为false。因为data值是FormData对象,不需要对数据做处理。
  2. <form>标签添加enctype="multipart/form-data"属性。
  3. cache设置为false,上传文件不需要缓存。
  4. contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

使用FormData对象添加字段方式上传文件

html代码如下:

<div id="uploadDiv">
  <input id="file" type="file"/>
  <button id="upload" type="button">上传</button>
</div>

JavaScript实现如下:

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
  url: '/upload',
  type: 'POST',
  cache: false,
  data: formData,
  processData: false,
  contentType: false,
  success:function(res){
     console.log(res);
  }

这里有几处不一样:

  • append()的第二个参数应是文件对象,即$('#file')[0].files[0]。contentType也要设置为false。
  • 从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件,只需要在<input type="file">里添加multiple或multiple="multiple"属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
vue实现购物车列表
Jun 30 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
jquery对table做排序操作的实例演示
Aug 10 #jQuery
基于JavaScript实现飘落星星特效
Aug 10 #Javascript
提高Node.js性能的应用技巧分享
Aug 10 #Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 #Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 #Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 #Javascript
通过示例彻底搞懂js闭包
Aug 10 #Javascript
You might like
Php部分常见问题总结
2006/10/09 PHP
利用static实现表格的颜色隔行显示
2006/10/09 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
requireJS使用指南
2016/04/27 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python冲顶大会 快来答题!
2018/01/17 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
采购主管的岗位职责
2013/12/17 职场文书
《月迹》教学反思
2014/02/19 职场文书
户外宣传策划方案
2014/05/25 职场文书
导航工程专业自荐信
2014/09/02 职场文书
卖车协议书范例
2014/09/16 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
员工辞职信范文大全
2015/05/12 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
javascript canvas实现雨滴效果
2021/06/09 Javascript
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL