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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
原生js实现轮播图特效
May 04 Javascript
Vue的Options用法说明
Aug 14 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
yii中widget的用法
2014/12/03 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
document.getElementById介绍
2011/09/13 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
python3中set(集合)的语法总结分享
2017/03/24 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python生成器以及应用实例解析
2018/02/08 Python
python3中property使用方法详解
2019/04/23 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
函授毕业个人自我评价
2014/02/20 职场文书
创意广告词
2014/03/17 职场文书
商铺租赁意向书
2014/04/01 职场文书
年检委托书
2014/08/30 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
院系推荐意见
2015/06/05 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL