<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. [转]GPS NEMA 0183协议

    一. NMEA0183标准语句(GPS常用语句) $GPGGA例:$GPGGA,092204.999,4250.5589,S,14718.5084,E,1,04,24.4,19.7,M,,,,0000 ...

  2. 微信公众号菜单与应用交互session

    http://www.cnblogs.com/yank/p/3476874.html http://blog.csdn.net/zmhawk/article/details/43671195 http ...

  3. poj 2923 Relocation 解题报告

    题目链接:http://poj.org/problem?id=2923 题目意思:给出两部卡车能装的最大容量,还有n件物品的分别的weight.问以最优方式装入,最少能运送的次数是多少. 二进制表示物 ...

  4. 广大暑假训练1（poj 2488） A Knight's Journey 解题报告

    题目链接:http://vjudge.net/contest/view.action?cid=51369#problem/A   (A - Children of the Candy Corn) ht ...

  5. 【HDU2007】平方和与立方和

    http://acm.hdu.edu.cn/showproblem.php?pid=2007 垃圾水题 随便搜了几个公式(但我实际写的暴力...题目保证不爆int,说明n,m<=10^3) 1^ ...

  6. set STL 简单说说

    set 这个容器,可以排序,以及去掉重复的东西 #include<bits/stdc++.h> using namespace std; int main() { string s; se ...

  7. DBA之RMAN备份

    13:00 backup database   backup db :3h 3h: 产生了10 archive log file   16:00 finish restore database; 13 ...

  8. LA-3716(sort的神用)

    题意: 给出两条长度均为n的NDA链A和B,找出一段最长的字串[l,r]使得该区域的突变位置不超过p%; 思路: sum[i]表示[1,i]中不相同的个数,可得表达式(sum[i]-sum[j])/( ...

  9. 【前端】Element-UI 省市县级联选择器 JSON数据

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/element_cascader.html 不想自己处理的就直接下载吧 http://shamoyuu.bj.bce ...

  10. bzoj 1657 Mooo 奶牛的歌声 —— 单调栈

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1657 单调栈水题. 代码如下: #include<iostream> #incl ...