ajax异步上传文件

最新推荐文章于 2022-11-17 16:33:08 发布

code_greenhand

最新推荐文章于 2022-11-17 16:33:08 发布

阅读量186

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/qq_35426012/article/details/108040638

版权

php 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

FormData对象介绍

FormData：字母意思就是表单数据，这是h5中新增的一个内置对象（构造器），它可以获取任何类型的表单项的值，比如text/radio/checkbox/file/textarea，适用于获取大量的表单项的值。常用于发送Ajax请求。
优点：简单的代码，就能将表单中所有类型的数据都收集到，包括文件域的内容，非常方便。
缺点：因为是h5新增，所以IE9+才支持。

ajax异步使用FormData对象上传文件带进度条

上传大文件就需要修改php.ini，主要修改三个max。
在这里插入图片描述

修改完毕，重启Apache。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<form name="myform">
   
    图　片：<input type="file" name="pic"><br>
    <input type="button" value="提交" id="btn">
</form>

<progress style="display: none;"></progress>

<script>
    //找button按钮，绑定单击事件
    document.getElementById('btn').onclick = function () {
        /***** 收集表单数据 *****/
        //var username = document.myform.username.value;
        //var pwd = document.myform.pwd.value;
        //....
        var form = document.myform;
        var fd = new FormData(form); //fd 就是收集到所有的数据
        /***** 发送Ajax请求 *****/
        var xhr = new XMLHttpRequest();
        /********** 制作进度条开始 **********/
        //console.log(xhr);
        //console.log(xhr.upload); // 发现有一个onprogress的事件
        var pro = document.getElementsByTagName('progress')[0];
        //当上传进度发生变化的时候，会触发下面的事件
        xhr.upload.onprogress = function (evt) {
            pro.setAttribute('max', evt.total);
            pro.setAttribute('value', evt.loaded);
            pro.style.display = 'block';
        };
        /********** 制作进度条结束 **********/
        xhr.onreadystatechange = function () {

        };
        xhr.open('post', '07FormData.php');
        xhr.send(fd);
    };
</script>


</body>
</html>

code_greenhand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax异步上传文件

FormData对象介绍FormData：字母意思就是表单数据，这是h5中新增的一个内置对象（构造器），它可以获取任何类型的表单项的值，比如text/radio/checkbox/file/textarea，适用于获取大量的表单项的值。常用于发送Ajax请求。优点：简单的代码，就能将表单中所有类型的数据都收集到，包括文件域的内容，非常方便。缺点：因为是h5新增，所以IE9+才支持。ajax异步使用FormData对象上传文件带进度条上传大文件就需要修改php.ini，主要修改三个max。修
复制链接

扫一扫