<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.11.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $(function () {

                $("#fileupload").change(function () {

                    var reader = new FileReader();

                    reader.onload = function (e) {

                        $("#img1").attr("src",e.target.result);

                    }

                    reader.readAsDataURL($(this)[].files[]);

                })

            });

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <input id="fileupload" type="file" />

    <img id="img1" style="width:150px; height:90px;" />

    </form>

</body>

</html>

HTML5实现图片选择并预览的更多相关文章

  1. Android实现本地图片选择及预览缩放效果仿春雨医生

    在做项目时常常会遇到选择本地图片的需求.曾经都是懒得写直接调用系统方法来选择图片.可是这样并不能实现多选效果.近期又遇到了,所以还是写一个demo好了.以后也方便使用.还是首先来看看效果 显示的图片使 ...

  2. html5 前端图片处理（预览、压缩、缩放）

    现在手机图片是越来越大了,上传图片流量耗费巨大.同时预览也是一个问题,所以利用HTML5 file和canvas来解决这个问题. var upload = { _o: null,//对象id _aut ...

  3. 微信小程序图片选择，预览和删除

    这里均用的是小程序原生api 废话不多说直接上栗子: <view class="addImv"> <!--这个是已经选好的图片--> <view wx ...

  4. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  5. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  6. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  7. html5 图片转base64预览显示

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  8. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  9. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

随机推荐

  1. KO.js学习笔记(一)

    1.官方网站:knockoutjs.com 2.要dom树加载完毕才能绑定数据 3.ui能实时更新,使用了ko的一个自定义属性:data-bind 4.可以对viewmodel中的属性添加subsci ...

  2. hdu 2604 Queuing（矩阵快速幂乘法）

    Problem Description Queues and Priority Queues are data structures which are known to most computer ...

  3. uva 10306 - e-Coins（完全背包）

    题目链接:10306 - e-Coins 题目大意:给出m和s, 再给出m种电子硬币,每种硬币有两种金额xi,yi.现在要在m种硬币种选若干个硬币,可以重复选同一种硬币, 使得(x1 + x2 + . ...

  4. oj 小黑华丽的逆袭机会

    Problem H: 小黑华丽的逆袭机会 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 79  Solved: 7 [Submit][Status][ ...

  5. 有关Repeater的事件

    Repeater放在Updatepanel中是可以通过右键->属性,双击事件来生成事件的,若能这样的话,那最后是用这种方法吧,最起码不会出错!

  6. Nicholas C. Zakas如何面试前端工程师

    转载自:http://www.cnblogs.com/yizuierguo/archive/2010/02/04/1663767.html Original Post:Interviewing the ...

  7. Can't load IA 32-bit .dll on a AMD 64-bit platform

    在myeclipse中使用的,tomcat异常:java.lang.UnsatisfiedLinkError: D:\JAVA\ApacheTomcat\bin\tcnative-1.dll: Can ...

  8. Manacher 算法

    Manacher算法用于求回文子串,它的复杂度为O(n). 这个算法有一个很巧妙的地方,它把奇数的回文串和偶数的回文串统一起来考虑了.在相邻的两个字符之间加进一个分隔符 '#' ,串的首尾也要加. 原 ...

  9. Tomcat教程

    随着java的流行,其在web上的应用也越来越广,tomcat作为一个开源的servlet容器,应用前景越来越广,本文将向你讲述tomcat的一些知识. 一:简介       tomcat是jakar ...

  10. Arduino周边模块：执行部件(舵机、直流电机、步进电机)

    Arduino周边模块:执行部件 Arduino周边模块:执行部件 嵌入式系统的构成 如今已经有各种各样的基于Arduino的嵌入式系统, 比如:智能小车.3D打印机.机器人,甚至还有基于Arduin ...