jq实现前端文件上传

时间：2022-08-31 16:07:45

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]);

jq实现前端文件上传

从上面的打印结果可以看到我们传的文件类型是“application/octet-stream”。

请求时的参数：

jq实现前端文件上传

请求后的结果：

jq实现前端文件上传

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. Web前端文件上传进度的显示

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

  5. JQ的异步文件上传

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

  6. 前端js上传文件后端C&num;接收文件

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

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

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

  8. Apache Commons FileUpload 实现文件上传

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

  9. Spring Boot 嵌入式 Tomcat 文件上传、url 映射虚拟路径

    1.Java web 应用开发完成后如果是导入外置的 Tomcat 的 webapps 目录的话,那么上传的文件可以直接的放在应用的 web 目录下去就好了,浏览器可以很方便的进行访问. 2.Spri ...

随机推荐

  1. c&plus;&plus; 二维数组传递

    c++ 二维数组传递 我们在传递二维数组时,对于新手来说,可能会存在某些问题,下面讲解几种传递方法 在讲解如何传递二维数组时,先看看如何动态new 二维数组 // 二维数组动态申请 int row , ...

  2. iOS 导航栏实现总结

    目标: 在UI界面中实现 整体效果的导航栏, 比如1 首页无导航条,次页有导航条, 2 导航条中不包含下方不包含黑边 3 导航条包含多个筛选项 等等 问题: 用系统带的NavigateBar 来实现时 ...

  3. &period;Net基础

     标题  状态  内容        NET应用程序是如何执行的?    http://www.cnblogs.com/kingmoon/archive/2012/07/16/2594459.html ...

  4. windows API 开发飞机订票系统 图形化界面 &lpar;三&rpar;

    来吧,接下来是各个功能的函数的实现代码. 首先,程序运行时加载读入账户信息和航班信息.接下来就该读取文件了. 我把账户资料和航班信息储存在了.txt文件里 那么问题就来了,挖掘机...额,不对,应该怎 ...

  5. 难搞的Android开发环境&lpar;sdk 代理&rpar;

    概述 搞了近一周的环境搭建,在csdn上提个问,有位网友说弄一下代理,搜一下,果真有人写博客:Android SDK代理服务器解决国内不能更新下载问题 其实我下了很多个集成好的 adt-bundle- ...

  6. kvm下Windows激活方式小计

    使用kvm创建widnwos镜像模板,镜像模板默认是已经激活的正版系统,但是使用程序拷贝部署到不同的机器后发现已经激活的系统变成未激活状态,我们需求就是需要拷贝到不同的机器也能显示是正版系统 网上找了 ...

  7. Python核心编程笔记--私有化

    一.私有化的实现 在Python中想定义一个类是比较简单的,比如要定义一个Person类,如下代码即可: # -*- coding: utf-8 -*- # __author : Demon # da ...

  8. Lua学习总结

    由于一些工作上的需要,开始对Lua的学习.之前有JavaScript的基础,而且两者都是脚本语言,所以本总结旨在列出与JavaScript不同的地方,方便后续的回顾和学习.下面进入正题吧! 1.注释 ...

  9. AutoIt中ControlFocus的使用

    在使用AutoIt最控件做自动化操作的时候,经常性的会碰到无法使用Windows Info工具获取控件的属性,但是我们又需要获取该控件的焦点,我们该怎么办呢? 方法1: 应用controlFocus方 ...

  10. Spring的Web MVC框架

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/web-mvc-framework.html: Spring web MVC框架提供了模型-视图-控 ...

相关文章