一、效果预览

效果图：

二、实现代码：

<!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. mysql 查看当前登陆用户匹配原则及权限user()与current_user()

    Mysql在进行登陆时,会去匹配mysql库中的user表,并赋予相应的权限,但是怎么知道我们当时的登陆的用户名及相应的权限呢? 在Mysql中,有两个函数,一个是user(),一个是current_ ...

  2. 登陆mysql时提示异常的解决方法

    [root@host2 ~]# mysql -uroot -p Enter password: ERROR (HY000): Can't connect to local MySQL server t ...

  3. struts2中struts.xml配置文件详解【未整理】

    1.    深入Struts2的配置文件 本部分主要介绍struts.xml的常用配置. 1.1.    包配置: Struts2框架中核心组件就是Action.拦截器等,Struts2框架使用包来管 ...

  4. Linq查询操作之Where筛选

    筛选操作where能够处理逻辑运算符组成的逻辑表达式.比如逻辑“与”,逻辑“或”,并从数据源中筛选数据,它和where子句的功能非常相似.Enumerable类的Where()原型如下: public ...

  5. 关于URL、Web的一些概念

    关于URL ★ 书写路径时,网络文件用斜杠“/”划分不同层级,本地文件管理系统用反斜杠“\”,分隔不同层级:                               如下图示   ★  绝对/相对 ...

  6. mvc、mvp、mvvm使用关系总结

    MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法 ...

  7. 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithProgress, IAsyncOperationWithProgress

    [源码下载] 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithPro ...

  8. sql 执行时间

    SET STATISTICS PROFILE ON SET STATISTICS IO ON SET STATISTICS TIME ON --GO /*--你的SQL脚本开始*/SELECT * F ...

  9. ahjesus配置vsftpd和xinetd

    vsftpd的简单配置参考此教程 传送门 教程内xinetd的配置失效, 用xinetd方式启动ftp方式如下 1.在/etc/xinetd.d/目录中创建一个文件vsftpd 内容如下: servi ...

  10. [翻译]:SQL死锁-阻塞探测

    到了这篇,才是真正动手解决问题的时候,有了死锁之后就要分析死锁的原因,具体就是需要定位到具体的SQL语句上.那么如何发现产生死锁的问题本质呢?下面这篇讲的非常细了,还提到了不少实用的SQL,但对我个人 ...