一、效果预览

效果图：

二、实现代码：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

如何通过js实现图片预览功能的更多相关文章

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

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

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

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

  3. HTML5实现图片预览功能

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

  4. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  8. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

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

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

随机推荐

  1. [Tool] Fiddle2基本使用

    Fiddler2已经成网页调试必备的工具. 简述下快捷命令: ?url =statu.=method @host bpafter url bpv method start stop 参考的文章: Fi ...

  2. PP66 EEPPPPMM SSyysstteemm AAddmmiinniissttrraattiioonn GGuuiiddee 16 R1

    ※★◆●PP66 EEPPPPMM SSyysstteemm AAddmmiinniissttrraattiioonn GGuuiiddee 16 R1AApprriill 22001166Conte ...

  3. 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式

    [源码下载] 重新想象 Windows 8 Store Apps (55) - 绑定: MVVM 模式 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 绑定 通过 M ...

  4. sql 事务使用

    BEGIN TRAN Tran_Money --开始事务 DECLARE @tran_error int; SET @tran_error = 0; BEGIN TRY UPDATE tb_Money ...

  5. Python轻量Web框架Flask使用

    http://blog.csdn.net/jacman/article/details/49098819 目录(?)[+] Flask安装 Python开发工具EclipsePyDev准备 Flask ...

  6. java之Class类详解

    测试中需要用到的代码 InterfaceA代码: package jichu; interface InterfaceA { String s1 = "this is s1 in Inter ...

  7. php 7 windows redis 扩展

    搜了一圈也没找到redis 对于 php 7 windows 扩展,最后还是在apache lounge论坛找到了php7全扩展包 本人把里面的扩展全进行了上传(下载见本文底部) 在这里主要讲讲 ph ...

  8. 利用PBfunc在Powerbuilder中使用https获取微信的AccessToken

    在前篇中讲解了使用PBFunc在Powerbuilder自己进行http的GET和POST操作. 本篇简单用代码演示下https的微信AccessToken的获取: n_pbfunc_http lnv ...

  9. 探索HashMap实现原理及其在jdk8数据结构的改进

    因为网上已经太多的关于HashMap的相关文章了,为了避免大量重复,又由于网上关于java8的HashMap的相关文章比较少,至少我没有找到比较详细的.所以才有了本文. 本文主要的内容: 1.Hash ...

  10. windows下使用makecert命令生成自签名证书

    1.makecert命令路径 C:\Program Files (x86)\Windows Kits\8.1\bin\x64 2.生成一个自签名证书 makecert -r -pe -n " ...