Ajax上传文件(原生JS篇)

原创 2017年10月13日 20:32:25

工作中用到了Ajax上传文件的情景
之前自己不知道ajax可以传
通过文档发现XHR2.0已经支持了 但需要集合ForData

目录结构
test 一级
files 二级 index.html 二级 saveFiles.php 二级

示例(根据上传文件的进度生成进度条)代码如下
HTML部分

    <div class='progress'>
        <div class="step"></div>
    </div>
    <form action="">
        <input type="text" name='name' placeholder="请输入姓名">
        <input type="text" name='skill' placeholder="请输入技能">
        <input type="file" name='icon'>
    </form>
    <input type="button" value='ajax2.0'>

CSS部分

    <style>
        .progress {
            width: 300px;
            height: 20px;
            border: 1px solid hotpink;
            border-radius: 20px;
            overflow: hidden;
        }

        .step {
            height: 100%;
            width: 0;
            background: greenyellow;
        }
    </style>

javascript部分

<script>
    //  如果我们要使用 ajax2.0 结合FormData 来提交数据 必须使用 post
    document.querySelector('input[type=button]').onclick = function () {
        //1.创建对象
        var xhr = new XMLHttpRequest();
        //2.设置请求行(get请求数据写在url后面)
        xhr.open('post', './saveFiles.php');
        //3.设置请求头(get请求可以省略,post不发送数据也可以省略)
        // 如果使用的时 formData可以不写 请求头 写了 无法正常上传文件
        //  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //3.5注册回调函数
        xhr.onload = function () {
            console.log(xhr.responseText);
        }
        // XHR2.0新增 上传进度监控
        xhr.upload.onprogress = function (event) {
            //  console.log(event);
            var percent = event.loaded / event.total * 100 + '%';
            console.log(percent);
            // 设置 进度条内部step的 宽度
            document.querySelector('.step').style.width = percent;
        }
        // XHR2.0新增 
        var data = new FormData(document.querySelector('form'));
        //4.请求主体发送(get请求为空,或者写null,post请求数据写在这里,如果没有数据,直接为空或者写null)
        xhr.send(data);
    }
</script>

PHP部分

<?php     
// 获取提交的文件信息
    print_r($_FILES); 


    // 保存上传的数据
    move_uploaded_file($_FILES['icon']['tmp_name'],'./files/'.$_FILES['icon']['name']);
?>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

原生JS实现ajax上传文件并显示进度条

html代码 <input type="button" onclick="uploadFile()

原生js异步文件上传

;(function(window,document){     var myUpload = function(option) {         var ...

js ajax文件上传

黄聪:一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

====================================================== 注:本文源代码点此下载 =============================...

SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传

一、spring mvc配置1、web.xml <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi...

js+php ajax异步上传文件

网页制作中经常回看到上传按钮,可以实现异步上传文件,下面我们分享一款源码实现Ajax异步上传文件的方法。

Ajax 配合node js multer 实现文件上传

说明 最近在做一个聊天软件,支持注册、登录、在线单人、多人聊天、表情发送、各种文件上传下载、增删好友、聊天记录保存、通知声开关、背景图片切换、游戏等功能,因为是学前端的,所以使用ajax和multer...

JS Ajax实现文件上传

AjaxUpload.js /** * AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums...

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPO...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)