Ajax上传文件(原生JS篇)
工作中用到了Ajax上传文件的情景
之前自己不知道ajax可以传
通过文档发现XHR2.0已经支持了 但需要集合FormData
目录结构
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 来提交数据 必须使用 postdocument.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']);
?>
Ajax上传文件(原生JS篇)相关推荐
- egg.js ajax上传文件,egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名...
一.需求 egg.js 的文件上传个人觉得很一般,内置的 multipart 插件并不怎么好用. egg-multipart 也是基于 co-busboy 实现的. egg 官方给的文件上传的示例地址 ...
- 原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
- js ajax上传文件功能
js ajax上传文件功能 ajax请求 php接收文件(yii框架) ajax请求 <form enctype="multipart/form-data"><i ...
- jsp通过ajax上传文件,基于jquery
#前言 推荐讲解:使用ajax提交form表单,包括ajax文件上传 推荐讲解:HTML5+Ajax上传文件 建议:看这篇之前,请先了解直接form表单提交servlet方式上传文件 jsp上传文件 ...
- ajax轮询 xml,闲话ajax,例ajax轮询,ajax上传文件
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
- 前端通过ajax上传文件到七牛云
1. 从服务端获取七牛云上传的token,生成token参考官方文档https://developer.qiniu.com/kodo/1208/upload-token 2. 在七牛云文档查找上传的存 ...
- 页面无刷新ajax上传文件--模拟iframe,超简单
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
- 上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
- ajax上传文件 获取失败,Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法...
本篇文章给大家带来的内容是关于Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 问题 A ...
最新文章
- 快速设置戴尔latitude笔记本的触摸板和指点杆
- 【机器视觉案例】(9) AI视觉,手势控制电脑键盘,附python完整代码
- poj - 1651 Multiplication Puzzle
- /proc文件夹介绍
- Python 二分查找
- Apache ZooKeeper - 节点实操常用zookeeper命令
- ACE_Proactor网络通信示例
- python哪些模块用于数据分析_python数据解析模块之glom模块的使用(一)
- MongoDB服务无法启动,原因居然是...
- oracle复制一个表的结构图,Oracle复制表结构
- c++11 string转ing_pdfkit | 利用python实现html文件转pdf
- 一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅
- redis 辅助工具包 - redis-aux
- 施耐德plc地址对应modbus_第446期丨PLC与HMI脚本数据类型交换;继电器触点烧死问题原因分析...
- Java线程输出字母大小写_FastJson 输出值 首字母大小写问题
- 拦截器(Interceptor)和过滤器(Filter)区别
- java电商项目简历_一文解析从写简历,到面试、谈薪酬技巧和防坑指南
- 你所知道好玩有趣的 iOS URL schemes 有哪些?
- Spherical Harmonics Lighting
- ⌨RK61键盘使用方法
热门文章
- 骁龙8+gen1和骁龙8gen1区别 骁龙8+gen1和骁龙8gen1功耗
- 无线路由器怎么用?教你怎么设置无线路由
- 10、SpringBoot之SpringAop的认识
- Ubuntu16.04安装 双显卡安装Nvidia驱动 登录循环 黑屏(通用 终结此类问题)
- Android中的StrictMode简介
- linux c语言定时关机,linux 定时关机命令
- [IOS]How does uitableview cell remain highlighted?
- Java-上传文件Spring MultipartResolver 或者 ServletFileUpload
- android沉浸式布局详解
- 8.OpenCV-识别身份证号码(Python)