<%@ 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. Varnish安装使用（初学）

    本人对varnish也是新手,这里记录一下安装步骤! 环境:centos6.6 varnish安装包下载:wget https://repo.varnish-cache.org/source/varn ...

  2. oracle空间管理

    表空间:组织数据文件的一种途径,  是一个逻辑概念  包含有 表,字段,索引 一个数据库可以对应多个表空间 一个物理文件对应一个表空间 任何一个数据库创建的第一一个表空间是 system Tables ...

  3. 使用 mock.js 让前端开发与后端独立

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. decode 函数将字符串从某种编码转为 unicode 字符

    环境:Ubuntu, Python 2.7 基础知识 这个程序涉及到的知识点有几个,在这里列出来,不详细讲,有疑问的直接百度会有一堆的. 1.urllib2 模块的 request 对像来设置 HTT ...

  5. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. JMeter之JDBC接口测试

    使用jmeter连接数据库后,即可在jmeter中构造对数据库进行增删改查的请求以对数据库进行测试,以下以mysql数据库为例,演示jmeter连接mysql并进程查询操作的步骤. 1.确保mysql ...

  7. P1967 货车运输 -60分

    打了一个最大生成树+dfs,60分成功tle #include <bits/stdc++.h> using namespace std; const int maxn = 10005; c ...

  8. [转]Android SHA1与Package获取方式

    转自高德地图LBS Android SHA1与Package获取方式 获取应用包名 打开Android 应用工程的 AndroidManifest.xml配置文件,package 属性所对应的内容为应 ...

  9. 访问 Android Developers 403 错误

    原因: 以前改过 hosts. 现在用的 威-屁-恩. 解决办法: 把改过的 hosts 删掉就行了.

  10. 如何将SVN patch的修改做成old&new文件

    背景 最近解决lua的一则协程问题, 需要将一个patch添加到我们自己的lua库代码中, 由于我们整合的lua库代码目录,与原始的lua库代码不一致,导致不能直接使用path应用到我们自己的lua代 ...