<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. HTTP协议六种请求方法,get,head,put,delete,post有什么区别

    标准Http协议支持六种请求方法,即: 1.GET 2.POST 3.PUT 4.Delete 5.HEAD 6.Options 但其实我们大部分情况下只用到了GET和POST.如果想设计一个符合RE ...

  2. Pyhton：List build-in function

    列表是Python中的可迭代对象之一,在讲列表的内建函数之前我们可以自己在IDE上看看都有那些内建函数,我们可以在pycharm中使用代码及其运行结果如下: print(dir(list)) ['__ ...

  3. hdu 1166 敌兵布阵 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1166 题目意思:给出 N 个数你,通过对某些数进行更改(或者 + 或者 -),当输入的是 Query ...

  4. [SoapUI] Read data from response , use it to update parameter

    import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def holde ...

  5. 容器之vector

    #include <iostream> #include <vector> #include <string.h> #include <algorithm&g ...

  6. Spherical Harmonics Lighting

    [转自:http://www.cnblogs.com/daniagger/archive/2012/05/29/2524133.html] 1.背景知识 1.1 光照表示 之前我们都只考虑光源点和物体 ...

  7. 51nod1270 【dp】

    思路: dp[i][0]代表第i个位置取1,dp[i][1]代表第i个位置取b[i]. #include <bits/stdc++.h> using namespace std; type ...

  8. Codeforces 702B【二分】

    题意: 给一个a数组,输出有多少对相加是等于2^x的.1<=a[i]<=1e9,n<=1e5 思路: a[i]+a[j]=2^x 对于每个a[i],枚举x,然后二分查找a[j]; p ...

  9. MySQL 使用 MySQLDump 复制数据库

    1.导出整个数据库  mysqldump -u 用户名 -p 数据库名 > 导出的文件名      mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.s ...

  10. PJzhang:左耳朵耗子-陈皓

    猫宁!!! 参考链接:https://coolshell.cn/haoel 左耳朵耗子原名陈皓,那个是他的网络ID,在我眼中是个值得尊敬的程序员,虽然我对他真人没什么了解. 这是他博客的自我介绍: 2 ...