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 版本自动生成文章摘要
Jul 23 Javascript
prototype 学习笔记整理
Jul 17 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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 XML数据解析代码
2010/05/26 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php建立Ftp连接的方法
2015/03/07 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python 字符串和整数的转换方法
2018/06/25 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python3 下载网络图片代码实例
2019/08/27 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
房地产还款计划书
2014/01/10 职场文书
销售内勤岗位职责
2014/04/15 职场文书
软件项目实施计划书
2014/05/02 职场文书
学校个人对照检查材料
2014/08/26 职场文书
办理收楼委托书范本
2014/10/09 职场文书
玄武湖导游词
2015/02/05 职场文书
宣传稿格式范文
2015/07/23 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript