jq实现前端文件上传
FormData
FormData是XMLHttpRequest Level 2 新增的一个接口。
使用FormData可以实现各种文件上传。
使用
// 创建FormData的实例
var formdata = new FormData(); // 用append()为实例添加键和值
formdata.append(键名, 键值);
注意
使用jq的$.ajax()方法来进行文件上传时,需要设置contentType和processData两个参数。
参数 | 类型 | 说明 |
contentType | String |
当发送信息至服务器时,内容编码类型默认为“application/x-www-form-urlencoded”。 该默认值适合大多数应用场合。 |
processData | Boolean |
默认为true。 默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型“application/x-www-form-urlencoded”。 如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。 |
从上面两个参数的说明可以看出,ajax发送数据的时候内容编码类型是“application/x-www-form-urlencoded”,
而我们上传的文件可能是其他类型,所以上传的时候不设置内容类型,故 contentType: false,
不对数据做处理,故 processData: false 。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq实现前端文件上传</title>
</head>
<body>
<input id="file" type="file">
<button id="btn">上传</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').click(function() {
var formdata = new FormData();
formdata.append("file", $('#file')[0].files[0]);
$.ajax({
type: "POST",
url: "你要将文件上传到的地址",
data: formdata,
contentType: false, // 不设置内容类型
processData: false, // 不处理数据
dataType: "json",
success: function(data) { // 请求成功后要执行的代码 },
error: function(data) { // 请求失败后要执行的代码 }
});
});
</script>
</body>
</html>
观察
console.log($('#file')[0]);
console.log($('#file')[0].files[0]);
从上面的打印结果可以看到我们传的文件类型是“application/octet-stream”。
请求时的参数:
请求后的结果:
jq实现前端文件上传的更多相关文章
- 七牛云存储的 Javascript Web 前端文件上传
因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传 七牛是不错的云存储产品,特别是有免费的配额可 ...
- Baidu WebUploader 前端文件上传组件的使用
简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...
- 【Web】前端文件上传,带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
- 前端文件上传-javascript-ajax
书写是为了更好的记忆. 方案一:form表单上传 该方案优点是支持好,缺点刷新页面. <form action="url" method="post" e ...
- Web前端文件上传进度的显示
跟后台关系不大,主要是前端js实现,具体使用了XMLHttpRequest的ProgressEvent事件,可以参考MDN中的Using XMLHttpRequest https://develope ...
- JQ的异步文件上传
一,view代码 <form role="form"> <div class="form-group"> <label for=& ...
- 前端js上传文件后端C#接收文件
本文粗略的讲下前端文件上传和后端文件接收的原理 前端代码 html <form onsubmit="uploadFile(event)"> <input type ...
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- Apache Commons FileUpload 实现文件上传
Commons FileUpload简介 Apache Commons是一个专注于可重用Java组件开发的 Apache 项目.Apache Commons项目由三个部分组成: 1.Commons P ...
随机推荐
- sqlserver查找使用了某个字段的所有存储过程
当一个系统中使用了很多的表,并且存在大量的存储过程,当数据库中的某个表删除了某个字段,那么相应的存储过程也需要改动,但是我们不知道哪些存储过程使用了该字段,那我们该怎么办?我们可以从之前的文档一个一个 ...
- win 10 在vs2017下对mpi的安装以及认识
这里我先对MPI进行一下简单的介绍,MPI的全称是Message Passing Interface,即消息传递接口. 它并不是一门语言,而是一个库,我们可以用Fortran.C.C++结合MPI提供 ...
- [Unity优化]批处理01:Statistics窗口
参考链接: https://docs.unity3d.com/Manual/RenderingStatistics.html unity版本:2018.3.8 新建一个场景,只保留Main Camer ...
- 关于mysql 表导入数据
一.实验准备: 1.实验设备:Dell laptop 7559; 2.实验环境:windows 10操作系统; 3.数据库版本:mysql 8.0; 二.实验目的: 1.将一个宠物表pet.txt文件 ...
- PHP生成PDF文件。
<?php require_once('TCPDF/tcpdf.php'); //实例化 $pdf = new TCPDF('P', 'mm', 'A4', true, 'UTF-8', fal ...
- python url监控 并邮件报警
import timeimport requestsimport smtplibfrom email.mime.text import MIMETextimport datetime def Send ...
- django之关联field 描述子是如何实现的
model定义时,每个field都是一个类属性,一个对象.在生成类时,属性有contribute_to_class的方法,会调用该方法. m2m field,它会先调用自己的contribute_to ...
- Django应用app创建及ORM
一.重要知识点回顾: 1. form表单提交数据的注意事项: 1. 是form不是from,必须要有method和action (action用来指定你的数据提交到后台哪个地方,method用来指定你 ...
- spring @Bean注解的使用
@Bean 的用法 @Bean是一个方法级别上的注解,主要用在@Configuration注解的类里,也可以用在@Component注解的类里.添加的bean的id为方法名 定义bean 下面是@Co ...
- promise.then, setTimeout,await执行顺序问题
promise.then VS setTimeout 在chrome和node环境环境中均输出2, 3, 1, 先输出2没什么好说的,3和1顺序让人有些意外 原因: 有一个事件循环,但是任务队列可以有 ...