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

<!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="dist/jquery1.11.1.js"></script>

</head>

<body>

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

    <div>

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

<div class="image_container">

<img id="preview" width="" height="">

</div>

    </div>

    </form>

</body>

</html>

<script>

    $(function () {

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

            var $file = $(this);

            var fileObj = $file[];

            var windowURL = window.URL || window.webkitURL;

            var dataURL;

            var $img = $("#preview");

            if (fileObj && fileObj.files && fileObj.files[]) {

                dataURL = windowURL.createObjectURL(fileObj.files[]);

                $img.attr('src', dataURL);

            } else {

                dataURL = $file.val();

                var imgObj = document.getElementById("preview");

                // 两个坑:

                // 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；

                // 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；

                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }

        });

    });

</script>

怎么简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览？的更多相关文章

  1. 简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览图片

    html代码: <input id="file_upload" type="file" /> <div class="image_c ...

  2. 获取input file 选中的图片，并在一个div的img里面赋值src实现预览

    代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上 [jquery代码] $(function() { $("#file_upload").change ...

  3. js获取input file完整路径的方法

    function getPath(){  //判断浏览器  var Sys = {};  var obj = document.getElementById("headImg"); ...

  4. js获取input file文件二进制码

    <html> <body> <img id="image"src=""/> <br/> <input ty ...

  5. layui 图片与表单一起提交 + layer.photos图片层预览

    HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> ...

  6. js获取 input file 图片缩略图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery如何获取input(file)控件上传的图片名称，即"11111.jpg"

    html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$( ...

  8. js 获取input file路径改变图像地址

    html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...

  9. Js/Jquery获取input file的文件名

    html代码:     <input type="file" name="file" id="file" class="in ...

随机推荐

  1. C++对析构函数的误解（转）

    C++析构前言 析构函数在什么时候会自动被调用,在什么时候需要手动来调用,真不好意思说偶学过C++…今日特此拨乱反正. C++析构误解正文 对象在构造的时候系统会分配内存资源,对一些数据成员进行初始化 ...

  2. 获取 苹果UDID 序列号

    UDID是什么? UDID 是由子母和数字组成的40个字符串的序号,用来区别每一个唯一的iOS设备,包括 iPhones, iPads, 以及 iPod touches,这些编码看起来是随机的,实际上 ...

  3. GDC2016【For Honor-荣耀战魂】的次世代动画技术

    生成自然丰富,反应灵敏的动作的“Motion Matching”是什么?         Ubisoft在2016年内预定发售的[荣誉战魂],是基于MOBA类集团战斗,并加入了高度紧张的剑斗动作的多人 ...

  4. 推荐《HeadFirst设计模式》

    相对于国内初版的<大话设计模式>,HeadFirst真的是更好的选择,虽然看起来很厚.很吓人,但对于初学者而言浅显易懂.直击要点,即使对设计模式熟悉的同学去读这本书相信也有很大的收获.用了 ...

  5. 《MongoDB 权威指南》 学习总结

    书目   http://baike.baidu.com/link?url=DVJuvrT4ssbM8V1pKcoRx5H1CwRRCynC6_Ix6YWIrr414opislflpPuY9hRDO4g ...

  6. [LeetCode]题解（python）：119 Pascal's Triangle II

    题目来源 https://leetcode.com/problems/pascals-triangle-ii/ Given an index k, return the kth row of the ...

  7. request.getHeader所想到的

    request.getHeader(""),简单的说就是获取请求的头部信息,根据http协议,它能获取到用户访问链接的信息. /** * Returns the value of ...

  8. iOS：融云即时通讯快速集成

    一.介绍 即时通讯在众多社交软件.生活软件以及教育软件中已经是必备的功能了,在当前国内,即时通讯SDK做的比较不错的有那么几家,例如环信SDK.融云SDK...,这两家做的都很不错,各有千秋吧,要是真 ...

  9. Windows Server 2008 R2 DNS服务器迁移

    一.实验模拟环境: Zhuyu公司有一个DNS服务器,因DNS服务器比较老旧,准备迁移至新的DNS服务器上(DNS备份也可以这么操作). 旧DNS服务器: 主机名: test-zhuAD        ...

  10. MetInfo数据库结构表

    met_admin_table 表 Key 字段名称 数据类型 不为空 默认值 说明 PK id INT(11) Yes   编号   admin_type TEXT Yes   管理员类型   ad ...