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

html5用ajax方式实现文件上传并显示进度

Html5 Ajax 上传文件 function UploadFile() { var fileObj = document.getElementB...
  • andypan1314
  • andypan1314
  • 2016年01月30日 17:19
  • 2417

ajax上传文件的原理与实现

ajax已经很普遍了,但使用 ajax上传文件自己却一直都没有涉及,我只知道挺复杂的,上传文件不同于上传一般的表单数据,必须特殊处理,知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目...
  • xuexiaodong2009
  • xuexiaodong2009
  • 2015年05月07日 10:11
  • 5926

js-用于上传的FormData与Blob

BLOBBLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器。在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。BLOB是一个大文件,典型的...
  • sinat_31057219
  • sinat_31057219
  • 2017年04月19日 17:52
  • 5691

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

html代码
  • blueblueskyhua
  • blueblueskyhua
  • 2017年02月21日 20:05
  • 609

原生js异步文件上传

;(function(window,document){     var myUpload = function(option) {         var file, ...
  • u014290054
  • u014290054
  • 2014年11月03日 15:07
  • 810

js ajax文件上传

  • 2016年09月26日 01:06
  • 2KB
  • 下载

ajax异步上传文件js

  • 2014年02月20日 14:25
  • 7KB
  • 下载

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

====================================================== 注:本文源代码点此下载 =============================...
  • javazhuanzai
  • javazhuanzai
  • 2012年01月15日 07:43
  • 2674

JS Ajax实现文件上传

AjaxUpload.js /** * AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums...
  • czh4869623
  • czh4869623
  • 2016年04月07日 21:32
  • 2074

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

一、spring mvc配置1、web.xml
  • javaloveiphone
  • javaloveiphone
  • 2016年12月20日 10:12
  • 3641
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax上传文件(原生JS篇)
举报原因:
原因补充:

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