html代码:

<input id="file_upload" type="file" />
<div class="image_container">
<img id="preview" style="height:130px;width:117px;border-width:0px;"/>
</div>

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; }
});
});

简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片的更多相关文章

  1. 怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?

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

  2. 获取input file 选中的图片,并在一个div的img里面赋值src实现预览

    代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上 [jquery代码] $(function() { $("#file_upload").change ...

  3. 使用readAsDataURL方法预览图片

    使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...

  4. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  5. input上传图片(file),预览图片的两种方法。blob与base64编码

    上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...

  6. js获取input file完整路径的方法

    function getPath(){  //判断浏览器  var Sys = {};  var obj = document.getElementById("headImg"); ...

  7. file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  8. 本地预览图片html和js例子

    本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  9. Org mode无法生成LaTeX公式预览图片

    最近需要在Cygwin平台下的Emacs Org mode中生成LaTeX数学公式的预览图片,从而得到图文并貌的笔记与任务管理文档.但当我执行org-toggle-latex-fragment命令后却 ...

随机推荐

  1. java之stream(jdk8)

    一.stream介绍 参考: Java 8 中的 Streams API 详解   Package java.util.stream   Java8初体验(二)Stream语法详解   二.例子 im ...

  2. Java序列化技术与Protobuff

    http://www.cnblogs.com/fangfan/p/4094175.html http://www.cnblogs.com/fangfan/p/4094175.html 前言: Java ...

  3. angularjs的$http.jsonp跨域的用法

    var app = angular.module("app",[]); app.run(function ($rootScope,$http) { $http.jsonp(&quo ...

  4. C# 属性和索引

    //用索引取一个记录中的各项 using system; class IndexerRecord{ private string[] data= new string [6]; private str ...

  5. CCF 模拟E DFS深搜

    http://115.28.138.223:81/view.page?opid=5 这道题问的很怪. 起点DFS,每一个点还要DFS一次,统计不能到终点的个数 数据量不大这样做也能AC #includ ...

  6. js之词法分析

    词法分析 词法分析: 先分析参数: 再分析变量声明: 分析函数声明: 一个函数能使用的局部变量,就从上面的3步分析而来 具体步骤: 1.函数运行前的一瞬间,生成 Active Object(活动对象) ...

  7. 初识Flask

    首先在学习flask的前提,我是使用了很久的django和tornado,现在在写总结也是本着工作后方便使用flask 少点东西,对flask的介绍和优点总结 1.安装 pip install fla ...

  8. MorkDown 常用语法总结

    推荐一款很好用的markdown编辑器:http://www.typora.io/ 基本技巧: 代码高亮 如果你只想高亮语句中的某个函数名或关键字,可以使用``实现 通常编辑器根据diamagneti ...

  9. Python统计百分比及排序

    source.txt: 60行 89 91 93 90 92 92 94 92 89 95 93 92 90 92 93 94 94 92 90 92 92 92 ... 统计各个值的百分比,并排序 ...

  10. HTML——meta标签

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容.&l ...