原生JS实现异步图片上传(预览)
效果
实现过程分为两步
1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片
2. 通过FormData对象生成表单数据,通过ajax上传到后台
HTML
<style>
.file-box{display: inline-block;position: relative;padding: 3px 5px;overflow: hidden;color:#fff;background-color: #ccc;}
.file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
.prev-box{display: inline-block; min-width: 200px;min-height: 120px;border-radius: 5px;padding: 5px;border:1px #ccc dotted;}
</style>
<body>
<form id="form1">
<div class="file-box">
<input type="file" class="file-btn" onChange="uploadImg(this)" accept="image/*" name="image"/>
上传文件
</div>
<br>
<div class="prev-box" id="prev-box">
<img style="width: 200px;" id="img">
</div>
<div id="uploadMsg" style="color: #f00"></div>
</form>
</body>
JS
function uploadImg(obj){
//1. 图片预览
//如果浏览器不支持 FileReader 则用文字提示
if(typeof FileReader == 'undefined'){
var prevBox = document.getElementById('prev-box')
prevBox.innerHTML = "浏览器不支持预览"
}else{
//获取上传文件,返回 File对象
var file = obj.files[0];
var reader = new FileReader()
//注册读取成功的回调函数
reader.onload = function (e) {
var img = document.getElementById("img");
img.src = e.target.result;
}
//开始以 DataURL格式读取文件
reader.readAsDataURL(file)
} //2. 图片上传
if(typeof FormData == 'undefined'){
alert('浏览器不支持图片上传')
}else{
var form = document.getElementById('form1')
var data = new FormData(form)
//添加自定义字段
data.append("CustomField", "This is some extra data")
//ajax请求
var httpRequest = new XMLHttpRequest();
httpRequest.open("POST", "upload.php", true);
httpRequest.onload = function(oEvent) {
if (httpRequest.status == 200) {
//服务器返回的保存路径
console.log(httpRequest.responseText)
} else {
document.getElementById('uploadMsg').innerHTML = '图片上传失败,错误码:' + httpRequest.status
}
};
httpRequest.send(data);
} }
相关知识
1. 通过获取 <input type="file" /> 的files获取结果为 File对象的伪数组集合
2. FileReader 支持输出多个格式 readAsDataURL( ) 、readAsText( ) 、readAsArrayBuffer( ),他们都接收一个 File 或者 Blob 对象作为参数
3. FileReader 对象支持多个事件回调 onloadstart( ) --开始读取、onprogress( ) --正在读取、onabort( ) --读取中断、onload( ) -- 读取成功,读取成功后数组保存在事件对象中 e.target.result
4. FromData 对象可以单独创建,也可以通过Form创建,使用append添加字段
5. 如果FormData对象是通过表单创建的,则表单中指定的请求方式会被应用到方法open()中 。
原生JS实现异步图片上传(预览)的更多相关文章
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- js:s上次预览,上传图片预览,图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 移动端 js 实现图片上传 预览
方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- Jquery图片上传预览效果
uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
随机推荐
- H5 实现图片上传预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- python函数之可迭代对象、迭代器的判断
怎么判断一个对象是可迭代对象还是迭代器 例子 from collections import Iterable, Iterator lst = ['Today is Wednesday', 'Tomo ...
- django登录逻辑
django-restframework中已经实现了登录逻辑,只需要安装配置就可以使用 pip install djangorestframework-jwt REST_FRAMEWORK = { ' ...
- SpeedReader for Mac(快速阅读器)v1.6免费版
SpeedReader for Mac是一款运行在Mac平台上的阅读软件,通过这款软件就可以自行调整阅读速度.通过SpeedReader Mac版用户可以将想要阅读的内容拖入到软件中,调整速度和字体, ...
- PythonStudy——PyCharm使用技巧 Column Selection Mode(列选择模式)
PyCharm的Column Selection Mode提供了列选择功能. 使用: 在当前文件右键->Column Selection Mode->用鼠标垂直选择文本 快捷键:Alt + ...
- java8_api_jdbc
jdbc-1 jdbc的概念 驱动的分类 连接oracle数据库 与任何表格数据源交互 代码编写步骤 加载驱动 Cla ...
- 在kerberos认证过程中Active Directory的作用
LDAP介绍 1),ladp(Lightweight Directory Access Protocol),轻量级目录访问协议,提供被称为目录服务的信息服务,特别是基于X.500(构成全球分布式的目录 ...
- from组件
目录 一.生成页面可用的 HTML标签 二.对用户提交的数据进行校验 三. form 综合示例: 四. modelform(自动根据字段生成表单) 五.modelformset 一.生成页面可用的 H ...
- 分布式ID生成策略
策略一.UUID 策略二.数据库自增序列 策略三.snowflake算法 策略四.基于redis自增 思路:利用增长计数API,业务系统在自增长的基础上,配合其他信息组装成为一个唯一ID. redis ...
- docker 快速部署ES集群 spark集群
1) 拉下来 ES集群 spark集群 两套快速部署环境, 并只用docker跑起来,并保存到私库. 2)弄清楚怎么样打包 linux镜像(或者说制作). 3)试着改一下,让它们跑在集群里面. 4) ...