代码如下利用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. 洛谷P2415 集合求和

    题目描述 给定一个集合s(集合元素数量<=30),求出此集合所有子集元素之和. 输入输出格式 输入格式: 集合中的元素(元素<=1000) 输出格式: 和 输入输出样例 输入样例#1: 2 ...

  2. 获取windows版本信息的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 个人不建议用 GetVersion 或GetVersionEx 之类的 API 来获取系统版本号.注意微软也说过,这个 ...

  3. Ubuntu16.04进入挂起或休眠状态时按任何键都无法唤醒问题解决办法

    挂起(待机)计算机将目前的运行状态等数据存放在内存,关闭硬盘.外设等设备,进入等待状态.此时内存仍然需要电力维持其数据,但整机耗电很少.恢复时计算机从内存读 出数据,回到挂起前的状态,恢复速度较快.一 ...

  4. React开发实时聊天招聘工具 -第五章 需求分析

    Axios的使用 axios.get('/data') .then(res=>{ if(res.status==200) this.setState(data:res.data) })

  5. PXE无人值守部署centos7.4操作系统

    1.基础环境: 镜像ISO文件名为:CentOS-7-x86_64-DVD-1804.iso 2.安装需要的软件包 yum install dhcp xinetd syslinux httpd tft ...

  6. Asp.Net Core 之 appsettings.json

    原文:Asp.Net Core 之 appsettings.json appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.con ...

  7. 讲述ssh服务攻击案例及事件分析

    修改中 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  8. Linux平台下Ntop流量监测安装,并实现Netflow全过程

    Linux平台下Ntop流量监测安装,并实现Netflow全过程 更多原创教学视频详见: http://you.video.sina.com.cn/m/1443650204 本文出自 "李晨 ...

  9. useradd---创建的新的系统用户

    useradd命令   useradd命令用于Linux中创建的新的系统用户.useradd可用来建立用户帐号.帐号建好之后,再用passwd设定帐号的密码.而可用userdel删除帐号.使用user ...

  10. logback 生成日志

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...