原生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()中 。
转载于:https://www.cnblogs.com/xiaoliwang/p/9736200.html
原生JS实现异步图片上传(预览)相关推荐
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- js实现图片上传预览功能
js实现图片上传预览功能 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 简单快捷的实现图片上传预览效果
简单快捷的实现图片上传预览效果 如何简单快捷的实现图片上传预览效果,想必这是绝大多数的c#新手遇到的一个小难题. 我学习c#也有一年的时间了,就把一个简单的方法给大家看看. 如下: readAsDat ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
- JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
最新文章
- 管理索引表:深入研究B树索引--重建,合并,删除(理论篇3)
- 暴力裁员?小米回应来了,网友表示没毛病!
- 教AI逐帧搓招玩《铁拳》通关最高难度,现在的街机游戏爱好者有点东西啊
- 链表操作---面向过程--到---面型对象---到模板类
- git中fatal: Authentication failed的问题
- python代码自动补齐插件
- (一)导学(Javascript设计模式系统讲解与应用)
- AUTOSAR从入门到精通100讲(二十一)-AUTOSAR通信篇—IpduM模块
- ant实例 jmeter_Jmeter+ant搭建环境
- 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常
- Leetcode(337)-打家劫舍III
- python找出数组中第2大的数字
- 编译OpenJDK12:运行提示缺少freetype
- 有关H5的第三章表单介绍
- 深度学习中 经常提到的 end to end 的理解
- 细粒度图像分类(FGVC)--- 综述
- 八、血条的制作和boss敌人的产生(雷霆战机)
- 与省市级联的市县——根据省/直辖市显示对应的市县
- 2188 完成比赛的最少时间(递推)
- 51单片机指令快速记忆方法总结
热门文章
- python3.6.4安装教程-Python3.6.4官方版
- python读取txt文件并写入excel-Python实现读取txt文件并转换为excel的方法示例
- 怎么自学python自动化测试-学习自动化测试,如何学习Python语言?
- python提高办公效率-提升Python程序运行效率的6个方法
- python处理excel表格实例-使用Python操作excel文件的实例代码
- python好还是c好-对比平台--Python与C ++之间的差异
- 小学生学python-小学生都学Python了,你还不知道如何开始
- 快速排序 python菜鸟教程-NumPy 排序、条件刷选函数
- LeetCode Reverse Vowels of a String(字符串中元音字符反转)
- strftime和strptime使用