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实现划词标记+划词搜索功能
Mar 06 Javascript
js中的string.format函数代码
Aug 11 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
学前端,css与javascript重难点浅析
Jun 11 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
一个php作的文本留言本的例子(三)
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
Python对文件操作知识汇总
2016/05/15 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python zip()函数用法实例分析
2018/03/17 Python
pandas实现选取特定索引的行
2018/04/20 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python3注册全局热键的实现
2020/03/22 Python
python list的index()和find()的实现
2020/11/16 Python
工商管理实习自我鉴定
2013/09/28 职场文书
学习十八大报告感言
2014/02/04 职场文书
平安校园建设方案
2014/05/02 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
小学运动会宣传稿
2015/07/23 职场文书
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs