<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. CH 5105 Cookies（贪心+DP）

    \(CH 5105 Cookies\) \(solution:\) 真是好题一道!这道题我想了很久很久,就得这一题可以直接完全贪心,可惜最后还是失败了,但是对贪心的深入思考也换来了一个最优解方案.然后 ...

  2. Delphi通过Get获取来自PHP的返回值

    Delphi代码 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contro ...

  3. POJ2243 Knight Moves —— A*算法

    题目链接:http://poj.org/problem?id=2243 Knight Moves Time Limit: 1000MS   Memory Limit: 65536K Total Sub ...

  4. sql server中like无法匹配下划线问题解决方案

    在sql server的like中下划线类似于通配符%,所以无法使用like '%_%'来匹配下划线,可以通过以下两种办法实现匹配下划线 1.使用转义字符escape like '%\_%' esca ...

  5. 【Selenium】Action.moveToElement

    使用moveToElement可是实现定位焦点,尝试后测试通过,代码如下       //鼠标单击前商品信息被隐藏,我们需要手动除展示商品标签的隐藏属性      JavascriptExecutor ...

  6. 【摘抄】u3d|unity学习教程与方法

    小编,因为下面这句话,还是决定,只摘链接地址(来自百度经验): http://jingyan.baidu.com/article/19192ad820f17be53e570715.html 经验内容仅 ...

  7. 用HTTP操作和文件操作把网页下载到sd卡

    这里先把代码贴到这里做一个存档,写到SD卡的是一个txt文件,改成HTML格式之后会出现百度主页,但是中文是乱码,这一点先暂时不去研究了. 代码: package com.larry.gotcha; ...

  8. 【字符串】BZOJ上面几个AC自动机求最为字串出现次数的题目

    (一下只供自己复习用,目的是对比这几个题,所以写得不详细.需要细节的可以参考其他博主) [BZOJ3172:单词] 题目: 某人读论文,一篇论文是由许多(N)单词组成.但他发现一个单词会在论文中出现很 ...

  9. Spring中Bean获取IOC容器服务的方法

    Spring 依赖注入可以让所有的Bean对其IOC容器的存在是没有意识的,甚至可以将容器换成其它的.但实际开发中如果某个Bean对象要用到Spring 容器本身的功能资源,需要意识到IOC容器的存在 ...

  10. COCOS2DX场景切换特效

    cocos2d-x 3.0中场景切换特效比较多,而且游戏开发中也经常需要用到这些特效,来使场景切换时不至于那么干巴,遂这里汇总一下,开发中使用. 百牛信息技术bainiu.ltd整理发布于博客园 场景 ...