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. Linq to SQL -- Join

    Join操作 适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), SelectM ...

  2. redis过期机制（官网文档总结）

    官网地址:https://redis.io/commands/expire redis过期定义如下: Set a timeout on key. After the timeout has expir ...

  3. mybatis入门篇：Mybatis高级查询

    1.ResultMap的association与collection association与collection功能类似,区别是一对一与一对多,这里以association为例. 首先说明一下需求: ...

  4. python-web自动化-键盘操作

    selenium提供了较为完整的键盘操作引入 from selenium.webdriver.common.keys import Keys使用键盘操作时,需要借助send_keys()来模拟操作.K ...

  5. IDEA overwrite报错、languagelevel设置不生效问题

    发现idea 倒入项目后,发现@override报错,发现是idea的jdk版本不对,需要设置大于1.5的jdk版本 解决办法: IDEA:File >> Project Structur ...

  6. Oracle的rollup、cube、grouping sets函数

    转载自:https://blog.csdn.net/huang_xw/article/details/6402396 Oracle的group by除了基本用法以外,还有3种扩展用法,分别是rollu ...

  7. dubbo rest服务 No provider available for the service 错误问题

    1.版本 dubbo 2.6.2 2.描述 消费者调用dubbo rest服务报No provider available for the service错误 网络上有讲是实体类未实现Serializ ...

  8. arcgis10.2 sde配置

    本机配置好oracle11g server 64位+client 32位.

  9. 新的blog站地址

    自己用Jekyll搭建了一个静态blog网站 以后的blog随笔就更新在:https:/blog.hudunsec.cn

  10. 学习使用github

    自己尝试了一下用git bash完成了第一次下载与上传,感觉git desktop应该是讲bash某些需要输入代码的工作图形化了,但是因为感觉用起来有些不知所措,所以反倒是用代码的gitbash比较方 ...