<%@ 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. SpringMVC表单标签简介

    在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需 ...

  2. mysql批量替换指定字符串

    将字段title中的abc替换为123 UPDATE `table1` SET `title` = replace(title, 'abc', '123') WHERE `typeid` =18;

  3. param STRING $username 要检查的用户名

    检查用户名是否符合规定 两位以上的字母,数字,或者下划线,代码如下: php;auto-links:false;">/** * 检查用户名是否符合规定 * * @param STRIN ...

  4. BizTalk开发系列(十九) BizTalk命名规范

    目前BizTalk项目的开发人员比较少,但是在开发过程中还是需要命名规范的约束.根据以往BizTalk项目的经验,整理了BizTalk命 名规范.包括:BizTalk Application, Sch ...

  5. 关于 calloc 函数使用 与fun 函数

    s=(float *) calloc (1,sizeof(float)); #include "stdio.h"#include "stdlib.h"void ...

  6. PHP的排序函数的总结

    Sort     破坏索引 升序    值排序 Rsort    破坏索引 降序    值排序 Asort    保持索引 升序     值排序 Arsort   保持索引 降序     值排序 Ks ...

  7. 利用html5调用本地摄像头拍照上传图片

    这个是前台HTML的代码. <div id="contentHolder"> <video id="video" width="32 ...

  8. Centos 6.5升级到Git2.1.2

    安装需求 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel# yum install gcc pe ...

  9. Day12~13(2016/2/1~2/2)

    进度:实现了自定义标题栏控件并调用

  10. tensorflow 学习（一）

    改系列只为记录我学习 udacity 中深度学习课程!! 1. 整个课程分为四个部分,如上图所示. 第一部分将研究逻辑分类器,随机优化以及实际数据训练. 第二部分我们将学习一个深度网络,和使用正则化技 ...