代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上

【jquery代码】
$(function() {
  $("#file_upload").change(function() {
    var $file = $(this);
    var fileObj = $file[0];
    var windowURL = window.URL || window.webkitURL;
    var dataURL;
    var $img = $("#preview");
 
    if(fileObj && fileObj.files && fileObj.files[0]){
      dataURL = windowURL.createObjectURL(fileObj.files[0]);
      $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; 
    }
  });
});
【html代码】:
<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" width="60" height="60">
</div>

获取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实现预览?

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

  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. Yeslab 华为安全HCIE-第七门-Agile Controlle

    课程目录:   华为安全HCIE-第七门-Agile Controller(12篇)\1_aglie_controller产品亮点讲解.avi 华为安全HCIE-第七门-Agile Controlle ...

  2. 今日SGU 5.17

    SGU 119 题意:给你一个0-15组成的4*4的矩形,问你能不能回到正常 收获:把矩形变成一维数组,然后判断当前矩形状态到目标状态(逆序对为15)逆序对和0到目标的奇偶性是否不相同,证明题,引荐大 ...

  3. PHP设置30秒内对页面的访问次数

    <?php //Calculate 60 days in the future //seconds * minutes * hours * days + current time $intime ...

  4. 【Henu ACM Round#18 A】 Multiplication Table

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 遍历i从1..n 看看x%i==0以及x/i<=n是否成立. [代码] #include <iostream> u ...

  5. 【Henu ACM Round#15 A】 A and B and Chess

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 统计大写和小写的个数. 比较答案.输出即可. [代码] #include <bits/stdc++.h> using n ...

  6. crontab FAQ

    1.crontab变量问题 crontab中的脚本须要引入系统变量才干找到,否则crontab中的命令找不到系统变量,或者都写绝对路径. 2.1分钟运行一次 */1 * * * * /etc/keep ...

  7. HDU - 2254 奥运 (求等比数列和)

    Description 北京迎来了第一个奥运会,我们的欢呼声响彻中国大地,所以今年的奥运金牌 day day up! 比尔盖兹坐上鸟巢里,手里摇着小纸扇,看的不亦乐乎,被俺们健儿的顽强拼搏的精神深深的 ...

  8. Android 经常使用的adb命令

    1.安装APK(假设加 -r 參数,保留已设定数据.又一次安装filename.apk) adb install xxx.apk adb install -r xxx.apk 2.卸载APK(假设加 ...

  9. 游戏开发之UDK引擎介绍和模型导入

    2014-09-18 10:01:3 3.7.5" style="border:0px; vertical-align:middle; max-width:100%"&g ...

  10. Android官方文档翻译——Fragment生命周期

    网上有的博客写得太乱 不如自己翻译官方文档 Lifecycle 生命周期 Though a Fragment's lifecycle is tied to its owning activity, i ...