<%@ 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. mysql 存储过程 动态sql例子

    proc:BEGIN ; ; ; ) DEFAULT ''; ) DEFAULT ''; ) DEFAULT '';#插入日志的表,一个活动一张表 #将局部变量转换成会话变量 #动态sql语言只接受会 ...

  2. javascript第七课js函数

    function add() { } 上面就是js中的方法,js中的方法与c#中的方法不同的是不需要写返回值类型 function  add(num1,num2) { return num1+num2 ...

  3. OC 语法基础一

    1.判断字符串开头 或 结尾 测试字符串是否以aString开始 - (BOOL)hasPrefix:(NSString *)aString; 测试字符串是否以aString结尾 - (BOOL)ha ...

  4. 互联网IP合全局路由优化的原则-Dijkstra算法证明

    周末继续写东西的一半填补了,为了达到完美的一天.我们知道一个事实,IP地址太多.统一管理是不可能的了,无论从控制平面从数据/管理层表示,飞机是如此. 所以.IP协议被设计为可伸缩.供IP路由术语,跳路 ...

  5. ASP.NET MVC 学习之路-1

    本文在于巩固基础 学习参考书籍:ASP.NET MVC4 Web编程 首先确定我们学习MVC的目标: 我们学习ASP.NET MVC的目的在于开发健壮的.可维护的Web应用,当然这需要一定的知识基础, ...

  6. VMware vSphere Client为虚拟机制定物理网卡（图文并茂）

    1.首先,查看我的服务器有几张网卡,如下图共3张,接下来我将为虚拟主机制定一张网卡,以及为当中的两台虚拟的CentOS7各制定一张网卡. 2.打开“硬件”---->“网络”,如图,已经启用一张网 ...

  7. CSS display属性的值及作用

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

  8. zoj1013 Great Equipment

    题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1013 大三了,准备刷一下动态规划,保持思维的灵活性,这一次从zoj刷 ...

  9. 1.js编程风格。 --- 编写可维护的javascript

    1. 使用4个空格字符作为一个缩进层级. 2. 不省略分号. ---> 自动插入分号机制非常复杂,且难于记忆. 3. 行的长度限定于80个字符. 4. 通常在运算符换行之后,下一行会增加两个层级 ...

  10. 生成php所需要的APNS Service pem证书的步骤

    1.登录到 iPhone Developer Connection Portal 并点击 App IDs 2.创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,我们的i ...