<%@ 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. 一封在JSP课程结束之后给学生的信

    <JSP应用程序设计>这门课终于考完了,虽然题目有点难,但我看大部分同学考的还可以,算上平时成绩应该都能拿到一个满意的分数. 再次感谢大家一个学期来对我的支持,跟大家一起的这个学期很开心, ...

  2. Java 可中断线程

    PART.1 无法中断的线程 一个无法中断的线程的例子. public class UninterruptableThread { @SuppressWarnings("deprecatio ...

  3. MVC5 Controller简要创建过程（1）：ControllerFactory的创建

    即将离职,闲来无事回顾下MVC的源码,到了Controller创建这里,由于流程有点复杂,鉴于自己记性不太好,索性就记录一下吧,方便日后参照. 首先看MvcHandler: public class ...

  4. org.hibernate.QueryException: could not resolve property: address of:

    Hibernate: select count(*) as y0_ from test.course this_ org.hibernate.QueryException: could not res ...

  5. iOS常用的封装方法

    做开发也有一段时间了,看了好多大神的代码,总体感觉他们写的代码简洁,好看,然而在对比下我写的代码,混乱,无序,简直不堪入目啊! 总体来说大神们的代码封装的都比较好,对一个项目要重复用到的代码他们都会封 ...

  6. 开发环境配置--Ubuntu+Qt4+OpenCV（二）

    同系列文章 1. 开发环境配置--Ubuntu+Qt4+OpenCV(一) 2. 开发环境配置--Ubuntu+Qt4+OpenCV(二) 3. 开发环境配置--Ubuntu+Qt4+OpenCV(三 ...

  7. php代码20个实用技巧 ------ 转发自菜鸟教程

    1.不要实用相对路径 常常会看到: require_once('../../lib/some_class.php'); 该方法有很多缺点:它首先查找指定的php包含路径,然后查找当前目录,因此会检查过 ...

  8. [LeetCode]题解（python）：148-Sort List

    题目来源: https://leetcode.com/problems/sort-list/ 题意分析: 用nlog(n)的时间复杂度实现一个链表的排序. 题目思路: 用归并排序的思想,将链表用快慢指 ...

  9. php命名空间使用

    对于命名空间,官方文档已经说得很详细[查看],我在这里做了一下实践和总结. 命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误.这种情况下只 ...

  10. dom元素和方法总结

    主要是参考<精通javascript>. 全局变量有: document.这个变量包含浏览器的html dom文档的引用. HTMElement 这个变量是所要html dom 元素的超类 ...