一.ajax与FormData的使用

　　最近在使用ajax朝后端提交数据时，如果提交的数据都是普通键值对还好说，直接使用ajax默认的格式向后端提交即可。

$('#d1').click(function () {

        $.ajax({

            // 提交的地址，不写默认提交至当前页面，同form表单的action

            url:'/index/',

            // 提交的方式

            type:'post',

            // 提交的数据，一般以键值对的形式出现

            data:{'name':'jason','password':'123'},

            // 回调函数

            success:function (data) {  // data接收的就是异步提交返回的结果

                alert(data)

            }

        })

    })

　　但是当有form表单中有提交文件的input框时<input type="file"  id='my_file'>，就必须使用JS的files属性以及修改ajax的编码格式了。除此之外还要使用FormData对象，它不仅可以存普通键值对，还可以存文件。

  $('#b1').on('click', function () {

      let formdata = new FormData();//生成一个FormData对象

      //$('#f1')[0]得到的是JQuery对象中的第一个JS对象，JS_obj.files拿到的包含所有文件对象的数组，通过索引取第一个文件对象

     //可以将formdata想象成一个字典或者说是自定义对象，执行append('key', 'value')给字典添加键值对

      formdata.append('file', $('#f1')[0].files[0]);

      $.ajax({

          url:'',

          type:'post',

          contentType:false,//用FormData自带的编码，所以不需要设置contentType

          processData:false,//告诉浏览器不要处理数据

          data: formdata,//直接将formdata提交至后端即可，后端request.POST拿到的是其中的普通键值对，而request.FILES拿到的就是其中的文件键值对

          success:function (data) {

              alert(data)

          }

      })

  })

二. FileReader对象的使用

　　在写一个注册页面时，想要实现用户选择头像时，直接就能将选择的头像显示出来，就必须使用到JS的FileReader对象。

　　FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

　　其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象（上面提到的使用files属性得到的文件对象）,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

　　2.1 可以用window对象的方法查看浏览器对FileReader的支持

if(window.FileReader) {

     var fr = new FileReader();

     // add your code here

 }

 else {

     alert("Not supported by your browser!");

 }

　　2.2 将上传头像显示出来的前端代码实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>register</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!--用bootstrap渲染过的页面，这里为了方便只写了一个上传头像的input框-->

<div class="container">

    <div class="row">

        <div class="col-md-5 col-md-offset-3">

            <h2 class="text-center">注册</h2>

            <div>

                <!--将img标签用label 标签包了起来，然后用display将Input框隐藏，这样点击图片就能选择上传头像-->

                <label for="my_file">头像<img id='id_img' src="/static/img/111.jpg" alt="" style="width: 80px"> </label>

            </div>

            <input type="file" name='myfile' id="my_file" style="display: none">

        </div>

    </div>

</div>

<script>

    /*给input框绑定change事件，内容改变就会触发，所以当选择头像然后上传时触发*/

    $('#my_file').change(function () {

        /*利用JS的files属性得到一个自定义对象（字典），键0对应的值就是文件对象，实际上就是我们上传的头像*/

        let fileObj = this.files[0];

        /*生成JS的FileReader对象*/

        let fileReader = new FileReader();

        /*将上传的头像交予fileReader对象，让其将内容读取然后渲染出来*/

        fileReader.readAsDataURL(fileObj);

        /*给fileReader对象绑定事件，等渲染完成后再执行function中的代码*/

        fileReader.onload = function () {

            /*将img标签中的src属性换成fileReader渲染过的内容，即换成我们上传的头像*/

            $('#id_img').attr('src', fileReader.result)

        }

    })

</script>

</body>

</html>

　　files属性得到的自定义对象：

　　2.3 FileReader对象的方法

　　readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
　　readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
　　readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）

　　2.4 FileReader包含的事件

　　例子中使用了fileReader的.onload事件，当fileReader对象的方法执行完毕时就会执行onload后面指定的function，如果不使用onload，例子是不可能成功的，你会发现一上传头像，对应的Img原来的图片也会没有了。因为img要的是fileReader.result的结果，可是fileReader读取以及渲染文件需要时间，它又是异步的，所以img的到的结果是空，而不是我们上传的头像。

　　

　　只要文件开始读取，无论结果如果，FileReader的对象中result属性都会有值，成功了就是读取的结果，失败了就是None。

　　是否疑惑之前img标签的src属性我们放的都是路径，可是fileReader.result拿出来的肯定不是路径啊，为什么当做src属性的值时可以显示出来？这是因为img标签的src属性不仅支持文件路径，还支持文件二进制数据或者url。

三. window.createObjectURL获取文件路径

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>register</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!--用bootstrap渲染过的页面，这里为了方便只写了一个上传头像的input框-->

<div class="container">

    <div class="row">

        <div class="col-md-5 col-md-offset-3">

            <h2 class="text-center">注册</h2>

            <div>

                <!--将img标签用label 标签包了起来，然后用display将Input框隐藏，这样点击图片就能选择上传头像-->

                <label for="my_file">头像<img id='id_img' src="/static/img/111.jpg" alt="" style="width: 80px"> </label>

            </div>

            <input type="file" name='myfile' id="my_file" style="display: none">

        </div>

    </div>

</div>

<script>

    $("#my_file").change(function(){

　　var objUrl = getObjectURL(this.files[0]) ;

　　console.log("objUrl = "+objUrl) ;

　　if (objUrl) {

　　　　$("#id_img").attr("src", objUrl) ;

　　}

}) ;

//取得该文件的url

function getObjectURL(file) {

　　var url = null ;

　　if (window.createObjectURL!=undefined) {

　　　　url = window.createObjectURL(file) ;

　　} else if (window.URL!=undefined) {

　　　　url = window.URL.createObjectURL(file) ;

　　} else if (window.webkitURL!=undefined) {

　　　　url = window.webkitURL.createObjectURL(file) ;

　　}

　　return url ;

}

</script>

</body>

</html>

JavaScript FormData对象，FileReader对象，files属性的更多相关文章

  1. JavaScript 中的FileReader对象（实现上传图片预览）

    方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...

  2. javascript:FileReader对象（读取文件）

    FileReader对象 1.检测浏览器对FileReader的支持 1 if(window.FileReader) { 2 var fr = new FileReader(); 3 // add y ...

  3. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  4. 关于Javascript中通过实例对象修改原型对象属性值的问题

    Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...

  5. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

  6. JavaScript中screen对象的两个属性

    Screen 对象 Screen 对象包含有关客户端显示屏幕的信息. 这里说一下今天用到的两个属性:availHeigth,availWidth avaiHeigth返回显示屏幕的高度 (除 Wind ...

  7. JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;

    JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...

  8. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  9. JavaScript 秘密花园——对象的使用和属性操作

    JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined. false.toString(); // 'false' [1, 2, 3].toString(); // ...

随机推荐

  1. nginx 代理第三方邮件站点

    需求:公司业务服务器使用的是阿里云,要求内网(仅有内网IP)所有流量走网关服务器(有外网IP及内网IP),内网服务器需要调用一个公网上的第三方邮件站点.在参考了https://www.linuxba. ...

  2. 用Gitolite搭建服务器上的Git

    使用git作为版本控制工具,确实非常流行且好用,常用的git代码服务器有Github还是国内的Gitcafe和OSC都是很不错,可以免费存放一些开源的项目代码,对于私人项目,则需要支付一定的费用.同时 ...

  3. http 详解

    HTTP协议中GET.POST和HEAD的介绍 GET: 请求指定的页面信息,并返回实体主体. HEAD: 只请求页面的首部. POST: 请求服务器接受所指定的文档作为对所标识的URI的新的从属实体 ...

  4. redis BLPOP

    一.需求 redis中保存了需要download的image url,存储格式为列表. 我需要从列表中获取数据,将图片下载保存到本地. 列表中的数据是一直增加的. 二.实现 使用redis BLPOP ...

  5. Swift--struct与class的区别(汇编角度底层分析)

    概述 相对Objective-C, Swift使用结构体Struct的比例大大增加了,其中Int, Bool,以及String,Array等底层全部使用Struct来定义!在Swift中结构体不仅可以 ...

  6. 一行python代码搞定文件分享

    给同事分享文件,如你所知通过聊天工具,网盘或linux命令各种方法,还有一个也可以尝试下:使用一行python代码快速搭建一个http服务器在局域网内进行下载. python3使用: python3 ...

  7. VMware Workstation 虚拟机的安装及kali Linux 的安装

    要用到虚拟机了,Windows平台的虚拟机现在主要用的是VMWare 和VirtuualBox了.VirtualBox作为一款免费的软件,用着还行.笔者这里主要介绍VMware的安装和使用 . 下载: ...

  8. HTML img标签的width height ismap usemap title alt 属性

    前言 img 元素向网页中嵌入一幅图像 今天特地对 img 的几个属性做了一下测试,在这里做一个笔记. 1. img 元素的width属性和height属性. (1)不设置 width 和 和 hei ...

  9. 前端每日实战：70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可 ...

  10. jdk1.5之后，classpath不需要再配置

    1.5之后更智能了. 设置了classpath之后,当前目录失效(在classpath中没找到就报错,不会再在当前目录继续找),所以要把当前目录添加到classpath,永久环境变量添加 .,临时环境 ...