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. Tomcat 服务器性能优化

    简介 考虑一下这种场景,你开发了一个应用,它有十分优秀的布局设计,最新的特性以及其它的优秀特点.但是在性能这方面欠缺,不管这个应用如何都会遭到客户拒绝.客户总是期望它们的应用应该有更好的性能.如果你在 ...

  2. CSS DIV HOVER

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 演示Android百度地图操作功能

    在本文中将演示百度地图的操作功能,包括缩放,旋转,视角切换,点击,双击,长按事件触发的操作以及截图等.百度地图本来就内置有缩放,旋转功能,那么在这里,截图(其实很多手机也自带截图功能)以及点击事件的监 ...

  4. Java Io(数据输入输出流)

    Java Io 字节流中的DataInputStream 和 DataOutputStream,使用流更加方便,是流的一个扩展,更方便读取int, long,字符等类型数据. 事例代码如下: pack ...

  5. iOS开发——UI基础-Xcode资源拷贝

    #1.拷贝资源的时候选择的copy的含义: 是否要将资源拷贝一份到项目中, 如果不勾选就代表着不拷贝, 那么原来的资源不见了, 项目中的也不能用了 注意: 1.虽然项目中的图片和外部的图片是同一张图片 ...

  6. 4 个最好的 Linux 引导程序

    导读 当你打开你的机器,开机自检(POST)成功完成后,BIOS(基本输入输出系统)立即定位所配置的引导介质,并从 MBR(主引导记录)或 GUID(全局唯一标识符)分区表读取一些命令,这是引导介质的 ...

  7. SQL 多表一起查询的语句总结

    sql 同时查询多个表 可以使用连表查询比如使用join sql 同时查询多个表 可以使用连表查询 比如 使用join select s1.*,s2.* from s1 left join s2 on ...

  8. 51Nod 1766 树上的最远点对

    Description 一棵树,询问两个端点编号分别在在 \([a,b]\) 和 \([c,d]\) 两个区间中的最长链. Sol 线段树+ST表. 树上最长链可以合并,只需要合并两个区间最长链的两个 ...

  9. livezilla账号或密码修改方法

    livezilla的账号和密码不在数据库,保存在php文件里面. 今天想修改一下网站livezilla系统管理员账号和密码,去数据库找了半天没找到,推测可能是存在文件中.搜索了一下,果然是在livez ...

  10. zabbix之Nginx安装

    转载自 http://www.ttlsa.com/nginx/nginx-install-on-linux/ Nginx下载 https://pan.baidu.com/s/1qXT54sO