<%@ 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. Xilinx SDK Problem Solution in Ubuntu

    Problem1: Documention and Example can't open, Xilinx SDK  Ubuntu.   Step1: Click the Document link o ...

  2. VPN fq工具的选择

    豆荚VPN还是不错的.有时候百度会打不开,重新连接一下就可以了 http://wandou.shouyo99.com/ 如果高速模式不可以,请记得选择PPTP模式!!!但有个副作用就是百度打不开了--

  3. mysql语句中有引号的问题解决方案

    在mysql的查询.修改.插入.删除的sql语句里有引号如何处理? 例如: <? $name = "my name is xcxc"; $people = "i'm ...

  4. 解决在web项目使用log4j中无法将log信息写入文件

    这是log4j.properties中关于的配置 log4j.appender.appender2.File=F:/myeclipseworkspace2/SecondBook2/log/second ...

  5. IOS第17天（1,Quartz2D图片水印）

    ****图片 水印 #import "HMViewController.h" @interface HMViewController () @property (weak, non ...

  6. iTunes.exe 在win7系统中运行出错解决办法

    重新安装了iTunes打开后就报错,然后直接退出 查windows日志提示错误应用程序名称: iTunes.exe 错误模块名称: KERNELBASE.dll 重新安装iTunes问题依旧,后来在G ...

  7. 【转】Unity中的协同程序-使用Promise进行封装（一）

    原文:http://gad.qq.com/program/translateview/7170767 译者:陈敬凤(nunu)    审校:王磊(未来的未来) 每个Unity的开发者应该都对协同程序非 ...

  8. EntityFramework code first 一些常用的约束特性

    参阅: https://msdn.microsoft.com/zh-cn/data/jj591583 1. 主键 public class Test { //名称为 ID 的属性会自动映射为主键(自增 ...

  9. MapReduce运行过程以及原理

    1.map和reduce MapReduce任务过程分为两个处理阶段:map阶段和reduce阶段.每个节点都以键值对作为输入和输出,其类型由程序员来选择.程序员还需要编写两个函数:map函数和red ...

  10. SQLSERVER2012 附加数据库重名的问题

    SQL2012附加数据库时如何更改数据库名称呢 方法一: 在“附加为”那一栏填写新的数据库名称就可以 方法二: 使用脚本 附加时点击脚本会自动生成附加脚本 直接修改database的名称即可!