代码如下利用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. (转载)http协议的Request Payload 和 Form Data 的区别

    我正在开发的项目前端和后端是完全独立的,通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务.昨天发现,我前端执行 post 请求,后台 springmvc 的 @RequestMa ...

  2. vue抽取公共方法———方法一

    方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]- ...

  3. 【Henu ACM Round#15 C】 A and B and Team Training

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举第一种方法. 剩下的全都个第二种方法. 看看能组成多少个队伍就可以了. [代码] #include <bits/stdc+ ...

  4. Activiti工作流框架学习(一)——环境的搭建和数据表的了解

    一.什么是工作流 工作流(Workflow),就是“业务过程的部分或整体在计算机应用环境下的自动化”,它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档.信息或任务的过程自动进行,从而实现 ...

  5. HDU 3714 Error Curves

    Error Curves 思路:这个题的思路和上一个题的思路一样,但是这个题目卡精度,要在计算时,卡到1e-9. #include<cstdio> #include<cstring& ...

  6. android中9-patch图片的使用

    看了非常多文章的介绍,9.png图片有两种区域:可扩展区和内容显示区. 弄了半天才明确什么叫做可扩展区,什么叫做内容显示区. 分享一下自己的理解. 下图是某博客的截图: 图片来自:http://blo ...

  7. [51Nod]NOIP2018提高组省一冲奖班模测训练(三) 题解

    链接 A.Anan的派对 题意:Anan想举办一个派对.Anan的朋友总共有 n 人.第i个人如果参加派对会得到 \(c_i\) 的快乐值,除他自己外每多一个人参加他会减少 \(d_i\) 的快乐值. ...

  8. 58.express安装问题:express不是内部也或者外部的命令解决方案

    转自:https://www.cnblogs.com/zhangym118/p/5842094.html "Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列 ...

  9. 3.索引与string进行映射实现高效查找

    #include <iostream> #include <typeindex>//类型索引 #include <unordered_map>//红黑树 #incl ...

  10. ElasticSearch vs Lucene多维度分析对比

    ElasticSearch vs Lucene的关系,简单一句话就是,成品与半成品的关系. (1)Lucene专注于搜索底层的建设,而ElasticSearch专注于企业应用.   (2)Luncen ...