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. loadrunner-27796错误寻求解决办法

    Action.c(58): Error -27796: Failed to connect to server "www.baidu.com:80": [10048] Addres ...

  2. CentOS 6.5安装Apache

    1.Apache的特点 功能强大.配置简单.速度快.应用广泛.性能稳定可靠,并可做代理服务器或负载均衡来使用 2.Apache的应用场合 使用Apache运行静态HTML网页.图片(处理静态小文件能力 ...

  3. VIM使用学习笔记 : 按键说明

    VIM有三种模式: 一般模式     上下左右移动光标,删除字符或删除整行,复制粘贴 编辑模式     i I i O a A r R 进入编辑模式 命令模式     在一般模式种输入 : / ?,可 ...

  4. 使用Ant部署应用程序系统

    1. 首先下载Ant http://ant.apache.org/ 配置环境变量 2. 编写build.xml部署文件如下: <?xml version="1.0" enco ...

  5. Android学习笔记(二)——探究一个活动

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 活动(Activity)是最容易吸引到用户的地方了,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一 ...

  6. [TimusOJ1057]Amount of Degrees

    [TimusOJ1057]Amount of Degrees 试题描述 Create a code to determine the amount of integers, lying in the ...

  7. tableView 选中cell时,获取到当前cell

    // >> 找到当前选中的cell,设置选中时的cell背景色 SideTableViewCell * cell = (SideTableViewCell *)[tableView cel ...

  8. ndk学习11: linux内存管理

        1. 进程地址空间   2.内存管理     栈上分配空间 alloca()       栈上分配大小 strdupa()    拷贝一个字符串到栈上(显然这个函数不安全)           ...

  9. discuzX3后台管理插件开发示例一 用户表查询

    上次的入门已经介绍了后台管理插件开发的基本步骤,下面简单写一个示例查询一下用户表 需要已完成以下操作: 1.已创建test后台管理插件 //详见 http://www.cnblogs.com/savo ...

  10. JS添加删除DIV

    function addDiv(w,h){     //如果原来有“divCell”这个图层,先删除这个图层    deleteDiv();    //创建一个div       var my = d ...