<%@ 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. Greenplum获取表结构

    最近在折腾greenplum,遇到一个蛋疼的问题,那就是获取表结构,也就是建表语句.大家都知道在MySQL里面是非常easy的,show create table table_name 就搞定了,在g ...

  2. 【iCore3 双核心板】例程三十：U_DISK_IAP_FPGA实验——更新升级FPGA

    实验指导书及代码包下载: http://pan.baidu.com/s/1jH1TiKY iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  3. SQL优化 1

    SQL_ID:fvdwtfv18yy0m 先看看sql的预估执行计划 select * from table(dbms_xplan.display_awr('fvdwtfv18yy0m')); sql ...

  4. dedecms 使用

    初看dedecms的后台界面就是一头雾水.不懂的词语多,什么模型,什么栏目,什么频道,不懂.相比于wordpress的分类category,标签tag,文章post,页面page而言,织梦后台难懂. ...

  5. Jenkins中Jelly基础、超链接、国际化

    Jelly基础 参考:https://wiki.jenkins-ci.org/display/JENKINS/Basic+guide+to+Jelly+usage+in+Jenkins UI Samp ...

  6. DreamweaverCS6

    1.设置文字的格式:<font face=""></font>  字号<font size=""> 颜色<font c ...

  7. ionic cordova 热更新

    因为项目需要,使用cordova的热更新插件,本地调试很简单,看连接https://github.com/nordnet/cordova-hot-code-push,就几步,这里不说了. 下面两个要装 ...

  8. SQL调优

    # 问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加,系 ...

  9. 字节流和字符流（BufferedReader类和BufferedWriter类）

    一般情况下,为了提高字符文件读/写效率,通常需要为文件读/写器添加一个缓冲读/写器,分别为BufferedReader类和BufferedWriter类. 1:BufferedReader类 假如上面 ...

  10. JAVA NIO系列（四） 选择器

    前面介绍过Channel.Buffer,后面的文章主要讲解Selector的实践以及实现原理,选择器的概念比起通道.缓冲区要复杂一些,并且选择器是NIO中最重要的一部分内容. 为什么使用Selecto ...