<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js图片预览功能</title>

<script language=javascript>

function previewFile() {

 var preview = document.querySelector('img');

 var file  = document.querySelector('input[type=file]').files[0];

 var reader = new FileReader();

 reader.onloadend = function () {

  preview.src = reader.result;

 }

 if (file) {

  reader.readAsDataURL(file);

 } else {

  preview.src = "";

 }

}

</script>

</head>

<body>

<input type="file" onchange="previewFile()"><br>

<img src="" height="200" width="300" alt="Image preview..."/>

</body>

</html>

H5图片预览功能的更多相关文章

  1. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  3. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  4. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  5. 34)django-上传文件,图片预览功能实现

    目录 文件上传      1)form表单提交上传(会刷新)      2)ajax上传      3)iframe      4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...

  6. 通过file文件选择图片预览功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. ext图片预览功能实现，前端代码

    效果图: extjs代码: // 模型 Ext.define('ParkingAttachment', {extend: "Ext.data.Model", idProperty: ...

  8. JavaScript图片上传前的图片预览功能

    JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...

  9. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

随机推荐

  1. C语言中的声明与定义的差别

    1.对于以下的声明语句 int a;        假设其位置出如今全部的函数体之外,那么它就被称为外部对象a的定义.这个语句说明了a是一个外部整型变量,同一时候为a分配了存储空间.由于外部对象a并没 ...

  2. 关于jquery中attr和prop的用法

    在项目开发中,遇到过这个情况,做一个全选的功能,通过点击一个checkbox实现下面的checkbox全选,用attr设置的checked属性,只可以生效一次,再次点击就不起作用了,但确实触发了事件, ...

  3. Servlet session的理解

    servlet参见http://blog.csdn.net/bryanliu1982/article/details/5214899 session参见http://lavasoft.blog.51c ...

  4. [RK3288][Android6.0] 调试笔记 --- 通用GPIO驱动控制LED【转】

    本文转载自:http://m.blog.csdn.net/kris_fei/article/details/69553422 Platform: ROCKCHIPOS: Android 6.0Kern ...

  5. SDUT OJ 1598 周游列国

    周游列国 Time Limit: 1000ms   Memory limit: 32768K  有疑问?点这里^_^ 题目描述 大家都知道孔子吧,春秋战国时候的一个老头儿.当时出国还不用护照,所以他经 ...

  6. Eos的Wasm智能合约的局限性

    官方只支持用C++写智能合约 用C++写智能合约门槛过高,会把许多开发者挡在门外,C++的复杂性也会让智能合约的设计变得困难. Wasm智能合约的效率并不是最优 由于C++最终也是编译成wasm字节码 ...

  7. 禁止屏幕旋转并同时解决以至于导致Activity重启的方法

    1.禁止屏幕旋转在AndroidManifest.xml的每一个需要禁止转向的Activity配置中加入android:screenOrientation属性. //landscape(横向)port ...

  8. module+standard library.py

    #导入模块 import sys sys.path sys.path.append('D:\program files\Python34\PyWorks') #hello.py文件路径 #不用appe ...

  9. VC++、MFC

    VC++.MFC最好的开源项目 介绍:介绍一下用VC++/MFC写的最好的开源项目. Sourceforge.net中有许多高质量的VC++开源项目,我列举了一些可以作为VC++程序员的参考. 正文: ...

  10. HashSet重复元素判断

    HashSet不能添加重复的元素,当调用add(Object)方法时候,首先会调用Object的hashCode方法判hashCode是否已经存在,如不存在则直接插入元素:如果已存在则调用Object ...