<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. virtualbox创建centos7虚拟机

    安装Virtualbox 下载安装: 直接到官网上下载,https://www.virtualbox.org/wiki/Downloads 然后一键傻瓜式的安装即可. 设置默认虚拟电脑位置: 管理=& ...

  2. JOptionPane常用提示框

    //JOptionPane.showMessageDialog(parentComponent, message, title, messageType, icon); JOptionPane.sho ...

  3. IOS中UIAlertView(警告框)常用方法总结

    一.初始化方法 - (instancetype)initWithTitle:(NSString *)title message:(NSString*)message delegate:(id /*&l ...

  4. hihocoder hiho一下 第二十六周 最小生成树一·(Prim算法)

    题目1 : 最小生成树一·Prim算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 最近,小Hi很喜欢玩的一款游戏模拟城市开放出了新Mod,在这个Mod中,玩家可以拥 ...

  5. POJ1321 棋盘问题 —— DFS回溯

    题目链接:http://poj.org/problem?id=1321 棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions ...

  6. IO、FileInputStream、(二十)

    1.IO流概述及其分类 * 1.概念(什么是IO?) * IO流用来处理设备之间的数据传输 * Java对数据的操作是通过流的方式 * Java用于操作流的类都在IO包中 * 流按流向分为两种:输入流 ...

  7. javascript 树形菜单

    1. [代码][JavaScript]代码     var ME={ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},html:function(da,f){var s='& ...

  8. html5--6-24 css3前缀

    html5--6-24 css3前缀 学习要点 掌握css3前缀的使用 CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属性前加上前缀词,也将其称之为浏览器 ...

  9. re(正则表达式)模块

    一.最常用的匹配语法 re.match 从头开始匹配 re.search 匹配包含 re.findall 把所有匹配到的字符放到以列表中的元素返回 re.split  以匹配到的字符当做列表分隔符 r ...

  10. writing-mode属性

    writing-mode属性 最初只是ie中的属性,只有ie支持,现在在css3中谷歌,火狐也开始支持. 所以使用的时候就需要记住两套不同的语法,ie的私有属性和css3的规范属性 如果只需要兼容到i ...