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实现前端文件上传的更多相关文章

  1. 七牛云存储的 Javascript Web 前端文件上传

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传 七牛是不错的云存储产品,特别是有免费的配额可 ...

  2. Baidu WebUploader 前端文件上传组件的使用

    简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...

  3. 【Web】前端文件上传，带进度条

    最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...

  4. 前端文件上传-javascript-ajax

    书写是为了更好的记忆. 方案一:form表单上传 该方案优点是支持好,缺点刷新页面. <form action="url" method="post" e ...

  5. Web前端文件上传进度的显示

    跟后台关系不大,主要是前端js实现,具体使用了XMLHttpRequest的ProgressEvent事件,可以参考MDN中的Using XMLHttpRequest https://develope ...

  6. JQ的异步文件上传

    一,view代码 <form role="form"> <div class="form-group"> <label for=& ...

  7. 前端js上传文件后端C#接收文件

    本文粗略的讲下前端文件上传和后端文件接收的原理 前端代码 html <form onsubmit="uploadFile(event)"> <input type ...

  8. layUI框架中文件上传前后端交互及遇到的相关问题

    下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...

  9. Apache Commons FileUpload 实现文件上传

    Commons FileUpload简介 Apache Commons是一个专注于可重用Java组件开发的 Apache 项目.Apache Commons项目由三个部分组成: 1.Commons P ...

随机推荐

  1. 机器学习笔记之二-win10+cuda9.1+CUDNN7+Anaconda3+VS2017+tensorflow1.5+opencv3.4

     [Tensorflow]环境搭建vs2017+win10+py3.6+cuda9.1+cudnn7+tf1.5 一.安装cuda 9.1+VS2017   一路下一步即可,环境变量cuda会自动配好 ...

  2. Idea项目上传git（与git结合使用）

    Prerequisite(前提): 1.拥有github账号 2.本地电脑安装git 3.拥有一个guthub的新仓库 一.本地git与github安全连接(若已经将本地git与github建立连接, ...

  3. Spring boot 的 properties 属性值配置 application.properties 与 自定义properties

    配置属性值application.properties 文件直接配置: com.ieen.super.name="MDD" 自定义properties文件配置:src/main/r ...

  4. kettle在centos7下部署分布式集群

    首先安装三台centos7 ,分别配置好静态ip    ssh免密码登录     关闭防火墙 具体步骤这里不多说了 关于centos7配置静态ip大家可以参考:https://www.cnblogs. ...

  5. hive 一次更新多个分区的数据

    类似订单数据之类的表,因为有状态要更新,比如订单状态,物流状态之类的, 这样就需要同步很久之前的数据,目前我的订单表是更新前面100天的数据. hive中操作是先删除前面100个分区的数据,然后重新动 ...

  6. Java——IO流 对象的序列化和反序列化流ObjectOutputStream和ObjectInputStream

    对象的输入输出流 : 主要的作用是用于写入对象信息与读取对象信息. 对象信息一旦写到文件上那么对象的信息就可以做到持久化了 对象的输出流: ObjectOutputStream 对象的输入流:  Ob ...

  7. 学习笔记 urllib

    第一步: get # -*- coding:utf-8 -*- # 日期:2018/5/15 19:39 # Author:小鼠标 from urllib import request url = ' ...

  8. Android 开发 ConstraintLayout详解

    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3' app:layout_constraintHorizo ...

  9. Centos7.3 编译安装GDAL以及Python的GDAL包

    参考: https://cryolite.iteye.com/blog/176382 https://blog.csdn.net/a13326021319/article/details/782505 ...

  10. Java学习之代码块(静态,构造代码块,构造方法)执行顺序

    静态代码块   static{ 代码 } 随着类的加载而加载,随类的消失而消失,存在于类中,方法外,最先执行,且只加载1次,可用来加载驱动及初始化对象属性. 构造代码块   {   } 也存在于类中, ...