一、效果预览

效果图：

二、实现代码：

<!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. 44个 Javascript 变态题解析 (上\下)

    第1题 ["1", "2", "3"].map(parseInt) 知识点: Array/map Number/parseInt JavaS ...

  2. 使用SignalR构建一个最基本的web聊天室

    What is SignalR ASP.NET SignalR is a new library for ASP.NET developers that simplifies the process ...

  3. 统一者管理员指南（Unifier Administration Guide）中文

    统一者管理员指南 Unifier Administration Guide 2014年6月 发布 2014年11月翻译 10.0版本 10.0.1译 关于译者 翻译者QQ:77811970 Email ...

  4. mysql 判断表字段或索引是否存在，然后修改

    判断字段是否存在: DROP PROCEDURE IF EXISTS schema_change; DELIMITER // CREATE PROCEDURE schema_change() BEGI ...

  5. C#设计模式——单件模式(Singleton Pattern)

    一.概述在软件开发过程中,我们有时候需要保证一个类仅有一个实例,比如在一个电脑用户下只能运行一个outlook实例.这时就需要用到单件模式.二.单件模式单件模式保证一个类仅有一个实例,并提供一个访问它 ...

  6. 使用BOM 的window对象属性打开新窗口

    ★  示例1 要求:弹出新窗口,并向新窗口写入动态HTML代码 代码 <buttononclick="btnOpen()">打开新窗口</button> & ...

  7. JPA学习(6)JPQL

    JPQL语言,即 Java Persistence Query Language 的简称.JPQL 是一种和 SQL 非常类似的中间性和对象化查询语言,它最终会被编译成针对不同底层数据库的 SQL 查 ...

  8. json在php中的使用之如何转换json为数组

    <?php $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}' ...

  9. Windows程序==>>使用ListView控件展示数据

    使用ListView控件展示数据 01.ImageList控件 1.了解了解         属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Trans ...

  10. SpringMVC中出现" 400 Bad Request "错误（用@ResponseBody处理ajax传过来的json数据转成bean）的解决方法

    最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@Respon ...