原生ajax上传图片
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']);
转载来自:https://blog.csdn.net/hellow_world_/article/details/78230150
原生ajax上传图片相关推荐
- 原生ajax传值php,原生ajax上传图片,php后台处理总结
原生ajax上传图片,php后台处理总结 这篇文章发布于 2018/10/03,归类于 后端数据库等 标签: 原生ajax上传图片,php后台处理图片上传 开始做图片上传,发现之前的处理方式基本忘光了 ...
- vue用form上传图片_vuejs使用FormData,ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
- js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件 最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...
- 原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
- 原生ajax XMLHTTPRequest()
原生ajax XMLHTTPRequest() 视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=10 代码 <!DOCTYPE html> ...
- ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是 异步.JavaScript ...
- java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
- 对原生ajax的理解
$.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...
- 原生ajax请求及readyState的几种状态
原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...
最新文章
- ROS基本概念与操作
- 基于消息的分布式架构设计
- 计算机视觉与深度学习 | 不含动态背景的前景目标提取
- 图像卷积与滤波知识点整理(2)
- IBM推荐的Eclipse的阅读清单(备忘)
- 建立一个普通方法无法打开查看和删除的文件夹
- python开发学习-day03(set集合、collection系列 、深浅拷贝、函数)
- PHP中输出本地时间
- node函数 python_成为Python大牛必须要掌握的高端语法(附链接代码)
- Qt Console Application
- 金士顿DT100G3(16G) U盘修复
- 凯悦250家店数据外泄 多家高端酒店存安全漏洞
- 音频算法工程师发展前景
- Linux编辑器-gcc/g++使用
- linux快速删除大量目录,Linux 快速删除大量小文件方法
- 时间复杂度空间复杂度分析
- 急刹车或停车时应该先踩离合还是先踩刹车?
- 低成本、云边端、软硬件一体化智能视频监控解决方案
- 计算机实训四综合应用答案,计算机应用综合实训及习题
- ionic开发——打开百度地图APP如何传递参数,导航路线
热门文章
- 测试网络线路质量方法
- 资金表实现过程方案二:资金表与冻结表分离(三)
- Windows server2003配置ftp服务
- 推荐打印打印控件Lodop,支持IE,firefox,chrome等位内核的浏览器
- 服务器安全主要包括哪些?
- SLAM学习笔记1:SLAM概述
- 如何在js中使用ajax请求数据,在 JS 中如何使用 Ajax 来进行请求
- 计算机图形学 之 DDA直线算法(数值微分法)
- ssm毕设项目百货商场管理系统lk299(java+VUE+Mybatis+Maven+Mysql+sprnig)
- thymeleaf携带数据跳转页面