JavaScript使用Ajax上传文件的示例代码
时间:2019-03-31
本文章向大家介绍JavaScript使用Ajax上传文件的示例代码,主要包括JavaScript使用Ajax上传文件的示例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了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); } });
需要注意:
- processData设置为false。因为data值是FormData对象,不需要对数据做处理。
- <form>标签添加enctype="multipart/form-data"属性。
- cache设置为false,上传文件不需要缓存。
- 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"属性。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- RabbitMQ(三) ——发布订阅
- RabbitMQ(四) ——路由
- RabbitMQ(六) ——RPC模式
- VFS四大对象之一 struct super_block
- 高性能网站架构方案(二)——优化网站响应时间
- VFS四大对象之二 struct inode
- Ubuntu 安装 Redis
- 高性能网站架构方案(三) ——Varnish加速与Gearman任务分发
- mysql 性能优化方案 (转)
- 《Redis设计与实现》读书笔记(一)——简单动态字符串(SDS)
- Comet:基于 HTTP 长连接的“服务器推”技术
- 编码修炼 | 快速了解Scala技术栈
- VFS四大对象之三 struct dentry
- PHP 排序算法实现讲解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- nn.functional和nn.Module
- 20分钟学会DBSCAN聚类算法
- Selenium Firefox驱动程序:使用Firefox浏览器自动进行测试
- Dataset和DataLoader
- 3分钟短文 | PHP 删除目录下所有的文件,这3种写法哪个有bug?
- 【Hive】DDL 与 DML 操作
- 模型层
- 损失函数
- WebDriverIO教程:处理Selenium中的警报和覆盖
- TensorBoard可视化
- Java自动化测试(Maven 8)
- Java自动化测试(HashSet和HashMap 7)
- 构建模型的3种方法
- 训练模型的3种方法
- 干货 | 携程APP/Web功能和视觉测试平台-Watcher