HTML5实现图片的上传预览,需要使用FileReader对象。

FileReader: The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

也就是说,使用FileReader对象先读取用户需要上传的图片,这个时候,图片是保存在浏览器中的,然后通过设置img元素的src,来预览图片,方法很简单。

在使用FileReader时需要先弄明白其Event handlers和方法。

Event handlers
Event handler 描述
FileReader.onabort A handler for the abort event. This event is triggered each time the reading operation is aborted.
FileReader.onerror A handler for the error event. This event is triggered each time the reading operation encounter an error.
FileReader.onload A handler for the load event. This event is triggered each time the reading operation is successfully completed.
FileReader.onloadstart A handler for the loadstart event. This event is triggered each time the reading is starting.
FileReader.onloadend A handler for the loadend event. This event is triggered each time the reading operation is completed (either in success or failure).
FileReader.onprogress A handler for the progress event. This event is triggered while reading a Blob content.
Metchods
Method 描述
FileReader.abort() Aborts the read operation. Upon return, the readyState will be DONE.
FileReader.readAsArrayBuffer() Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file's data.
FileReader.readAsBinaryString() Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.
FileReader.readAsDataURL() Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.
FileReader.readAsText() Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

所以只需要使用readAsDataURL()方法读取图片,绑定FileReader的onload事件,将读取的result中的url设置到img的src上

 <div><input id="upload" type="file"></div>
<div><img id="pic" src=""></div>
<script>
var reader = new FileReader();
reader.onload = function(e){
document.getElementById('pic').setAttribute('src', e.target.result);
};
function readURL(input) {
if (input.files && input.files[0]) {
reader.readAsDataURL(input.files[0]);
}
};
document.getElementById('upload').onchange = function(){
readURL(this);
};
</script>

HTML5图片上传预览的更多相关文章

  1. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  3. html5 图片上传 预览

    <html><body><fieldset> <legend>测试</legend> <div class="form-gr ...

  4. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  5. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  6. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  7. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  8. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  9. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

随机推荐

  1. caffe—ssd安装教程

    环境: ubuntu16.04 cuda8.0 cudnn5.0 已安装过caffe1.0 tensorflow1.2 编辑过程中出现问题尽量到这里面搜一下:https://github.com/BV ...

  2. weblogic管理脚本

    start.sh Java代码  #!/usr/bin/bash # # start.sh # @auth: zhoulin@lianchuang.com # SERVER_STATUS () { s ...

  3. USACO 1.5 Superprime Rib

    Superprime Rib Butchering Farmer John's cows always yields the best prime rib. You can tell prime ri ...

  4. 获得IP地址中文

    string ipFilePath = @"~/App_Data/QQWry.dat"; QQWryLocator QQWry = new QQWryLocator(Server. ...

  5. 打包phar文件过大的问题。

    根据一个开源工具得到的灵感,使用流打包,并使用token_get_all移除了所用PHP文件的空白.现在打包出来只有93k了.谢谢关注. 我一个简单的文件,加上一个symfony的process包,打 ...

  6. [OS][ linux ] 建立新帳號, 變更密碼, 加入 sudoer

    新增 linux , 設定預設 password, 新增 user 到 sudoers 1. 新增 User sudo useradd aa97 2. 設定 User password sudo pa ...

  7. PHP魔术方法__tostring()篇

    下面是关于__tostring 的运用 header('Content-type:text/html;charset="utf-8"'); /*存在内置方法_tostring()的 ...

  8. WCF(一)控制台寄宿

    WCF是微软开发的一款通信框架.具有跨平台跨操作系统的特点,所以,WCF一般用于开发第三方接口或者在分布式系统用做数据交互. WCF三要素分别是地址(Address).绑定(Binding).契约(C ...

  9. 脑图工具MindNode"附属节点"是什么意思 图解

    新手会发现在主节点上无论是按Tab子节点还是按Enter附属节点,都是向右延伸,感觉像没区别? 其实不然,从第二个节点开始,你再按 Tab 或者 Enter 就知道区别了. 废话少说,直接上图. 我觉 ...

  10. Pyhton学习——Day39

    # CSS的常用属性# 1 颜色属性# <div style="color:rgb(255,0,0)">ppppp</div># 2 字体属性# font- ...