代码如下利用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. 手把手教你用vue-cli构建一个简单的路由应用

    上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目, ...

  2. cogs 1456. [UVa 10881,Piotr's Ants]蚂蚁

    1456. [UVa 10881,Piotr's Ants]蚂蚁 ★   输入文件:Ants.in   输出文件:Ants.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述 ...

  3. 安卓MP3播放器开发实例(3)之进度条和歌词更新的实现

    上一次谈了音乐播放的实现,这次说下最复杂的进度条和歌词更新.因为须要在播放的Activity和播放的Service间进行交互,所以就涉及了Activity对Service的绑定以及绑定后数据的传输,这 ...

  4. 最小生成树-并查集-Kruskal-zoj-2048-special judge

    Highways description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a ...

  5. vim插件之ack

    这个插件其实是实现vim内部搜索功能的今天在学习vim搜索的时候,遇到了一个ack.vim的插件,这个插件给我们提供了一个并行于系统命令grep的搜索命令Ack 它的下载地址是 https://git ...

  6. js的类和继承

    因为我使用java语言入门的编程,所以对javascript的类和继承有种想当然一样,或者是差不多的感觉,但实际上两者还是有很多不同的 首先我们说类,javascript中类的实现是基于原型继承机制的 ...

  7. (MySQL里的数据)通过Sqoop Import HBase 里 和 通过Sqoop Export HBase 里的数据到(MySQL)

    Sqoop 可以与HBase系统结合,实现数据的导入和导出,用户需要在 sqoop-env.sh 中添加HBASE_HOME的环境变量. 具体,见我的如下博客: hadoop2.6.0(单节点)下Sq ...

  8. Linux系统下到哪儿寻找硬件错误

    Linux系统下到哪儿寻找硬件错误       当linux系统出现故障的时候,作为管理员首先要定位错误,现在linux有许多工具都能帮助用户寻找错误,要学会利用他们确定问题.这些工具包括dmesg. ...

  9. hadoop常用指令

    1.格式化名称节点:hadoop namenode -format 2.操作hadoop文件系统:hadoop fs -ls / 3.设置ubuntu默认以命令行方式启动 sudo gedit /et ...

  10. 【习题 8-12 UVA - 1153】Keep the Customer Satisfied

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 结束时间比较早的,就早点开始做. 所以,将n件事情,按照结束时间升序排. 然后对于第i件事情. 尽量把它往左排. 即t+1..t+a ...