一、效果预览

效果图：

二、实现代码：

<!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. SCRUM：第一天任务实现情况

    我认领了我们团队“广商百货”应用平台的密码提示功能,任务暂时还在进行中.虽然建立了数据库,但是数据库里要存放什么数据,我们的小组还在讨论中.因为android的知识还在自学过程中,所以做起来比较慢,也 ...

  2. MVC。Action方法，常用的返回类型有几种？

    常用的: 1,string,直接返回响应报文字符串 public ActionResult test(){return "哈哈";}2.ViewResult,ActionResul ...

  3. 【C#】线程之Task

    Task开启线程 有两种启动方式: 1.构造创建线程,然后启动 var taskForAction = new Task(() => { //do something }); taskForAc ...

  4. [CLR via C#]25. 线程基础

    一.Windows为什么要支持线程 Microsoft设计OS内核时,他们决定在一个进程(process)中运行应用程序的每个实例.进程不过是应用程序的一个实例要使用的资源的一个集合.每个进程都赋予了 ...

  5. 重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedFilesVector VirtualizedItemsVector 绑定

    [源码下载] 重新想象 Windows 8 Store Apps (53) - 绑定: 与 ObservableCollection CollectionViewSource VirtualizedF ...

  6. PHPWind 8.7中插件金币竞价插件的漏洞

    尽管pw团队解散,但无数站点仍在运行. 该插件的名字叫jbjingpai 无意中看到这样一篇帖子,说有漏洞 http://www.phpwind.net/read/1716722 ,不是空穴来风,查一 ...

  7. 泛函编程（10）－异常处理－Either

    上节我们介绍了新的数据类型Option:一个专门对付异常情况出现时可以有一致反应所使用的数据类型.Option可以使编程人员不必理会出现异常后应该如何处理结果,他只是获得了一个None值,但这个Non ...

  8. No.002：Add Two Numbers

    问题: You are given two linked lists representing two non-negative numbers.  The digits are stored in ...

  9. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  10. c#多线程生产者消费者(手稿)

    屋舍简陋,隔壁的娃娃哭了一晚,心中无恶意纯中性的想,有病就赶紧带孩子去看医生吧,能哭这么久估计孩子真的不舒服.