<%@ 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. openstack中文文档

    http://www.openstack.cn/p392.html   openStack Hacker中文文档 http://docs.mirantis.com/fuel-dev/develop/a ...

  2. aix创建lv 在lv上创建文件系统

    创建LV命令: mklv -y softlv -t jfs2 rootvg 15G 创建文件系统命令: crfs -v jfs2 -d/dev/softlv -m /soft -A yes 把soft ...

  3. 安装virtualbox虚拟机的增强功能

    转自:http://wubangtu.com/714 最近有很多人问我这个问题,现在全部写在这里,免得到时候又啰嗦一遍了,哈哈.欢迎大家前来围观: 安装virtualbox虚拟机的增强功能可以实现如下 ...

  4. Android UI ActionBar功能-在 Action Bar 上添加按钮

    在ActionBar上添加按钮实现某些功能最常见的Application的功能如:在ActionBar上添加一个搜索按钮: 首先官方文档说明:http://wear.techbrood.com/tra ...

  5. Eclipse:使用findBugs预先检测错误

    FindBugs是用于Java的另一种静态分析工具,它在某些方面与Checkstyle和PMD类似,但是侧重点不同.FindBugs不关心格式或编码标准,对最佳实践也不太感兴趣:事实上,它专注于检查潜 ...

  6. android 常用调用系统功能

    1.从google搜索内容 Intent intent = new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); intent.putEx ...

  7. Web API核查表：设计、测试、发布API时需思考的43件事[转]

    Web API核查表:设计.测试.发布API时需思考的43件事   当设计.测试或发布一个新的Web API时,你是在一个原有的复杂系统上构建新的系统.那么至少,你也要建立在HTTP上,而HTTP则是 ...

  8. 【整理】SQLServer查询各种数据库对象（表，索引，视图，图表，存储过程等）

    首先明确数据库对象的定义:数据库对象定义数据库内容的结构.它们包含在数据库项目中,数据库项目还可以包含数据生成计划和脚本. 常见的数据库对象包括:表,索引,视图,图表,缺省值,规则,触发器,存储过程, ...

  9. 从Quartz时间设置问题说起

    已经好久没有来写点啥了,原因有很多,不过最主要的还是自己很懒很懒,今天终于意识到问题的严重性了.所以就来了.今天的这个问题也是前不久刚刚遇到的问题.先不啰嗦,说重点了. 一.问题描述 定时任务项目发布 ...

  10. spring与hibernate整合事务管理的理解

    在谈Spring事务管理之前我们想一下在我们不用Spring的时候,在Hibernate中我们是怎么进行数据操作的.在Hibernate中我们每次进行一个操作的的时候我们都是要先开启事务,然后进行数据 ...