<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. Ruby map、each、select、inject、collect 、detect reference

    参考 https://ruby-china.org/topics/26718 map:(collect是map的别名函数) 对数组中每个元素进行表达式操作,原始数组不会被改变,返回执行表达式结果的新数 ...

  2. iOS webView的常见属性和方法

    一.初始化与三种加载方式 UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化,其加载数据的方式有三种: 第一种: - (void)load ...

  3. 【Codeforces 582A】 GCD Table

    [题目链接] 点击打开链接 [算法] G中最大的数一定也是a中最大的数.          G中次大的数一定也是a中次大的数. 第三.第四可能是由最大和次大的gcd产生的 那么就不难想到下面的算法: ...

  4. CodeBlocks+Qt（MinGW）配置

    1.安装CodeBlocks 官网:http://www.codeblocks.org/ 下载地址:http://www.codeblocks.org/downloads/26 有以下两种选择 cod ...

  5. Javascript位置 body之前、后执行顺序(探讨)!

    转载来自:http://blog.csdn.net/dxnn520/article/details/7927461 简介:当页面加载的时候,嵌入html标记的js代码和位于<body>&l ...

  6. ubuntu下安装vmtool

    这是我遇到这个问题的解决办法-------无法通过vmware的设置安装vmtoll 1.关闭虚拟机2.编辑虚拟机,将CD/DVD选项改成自动检测(而不是之前指向的ubuntuxxx.iso)3.重启 ...

  7. 51nod 1574 排列转换(猜结论)

    分析 猜了一下结论,居然对了..........具体操作是:假设排列s是1,2,3,...,nk为排列p中最大的 没有放到正确位置的数,k的位置为posk的右边一定有一个数x<=pos(因为&l ...

  8. hdoj5813【构造】

    2016 Multi-University Training Contest 7 05 真的真的好菜哇... 思路: 暴力. 我对那些到达目的地少的点做硬性规定就是去比他要到达目的地更少的点,这样一来 ...

  9. NOIp 2015信息传递【tarjan/拓扑/并查集】

    一道好的NOIp题目,在赛场上总能用许多算法A掉.比如这道和关押罪犯. 题目传送门 法一:tarjan在有向图中跑最小环 有人从别人口中得知自己信息,等效于出现了一个环.于是 这就变成了一个有向图ta ...

  10. 如何通过Gitalk评论插件，5分钟为你的博客快速集成评论功能

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...