简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
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实现预览图片的更多相关文章
- 怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- 获取input file 选中的图片,并在一个div的img里面赋值src实现预览
代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上 [jquery代码] $(function() { $("#file_upload").change ...
- 使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...
- input file 模拟预览图片。
首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...
- input上传图片(file),预览图片的两种方法。blob与base64编码
上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...
- js获取input file完整路径的方法
function getPath(){ //判断浏览器 var Sys = {}; var obj = document.getElementById("headImg"); ...
- file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- 本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- Org mode无法生成LaTeX公式预览图片
最近需要在Cygwin平台下的Emacs Org mode中生成LaTeX数学公式的预览图片,从而得到图文并貌的笔记与任务管理文档.但当我执行org-toggle-latex-fragment命令后却 ...
随机推荐
- xcode7 NSAppTransportSecurity
在Info.plist中添加 NSAppTransportSecurity 类型 Dictionary Dictionary 下添加 NSAllowsArbitraryLoads 类型 Bool ...
- 操作PDF文件的关键技术点
一个PDF文档从大到小可以分成如下几个要素:文档.章节.小节.段落.表格.列表. com.lowagie.text.Document表示PDF文档.必须为它创建一个PDF写入器,即com.lowagi ...
- python 字典 注意点
dict()构造函数直接从键-值对序列创建字典: >>> >>> dict([('sape', 4139), ('guido', 4127), ('jack', 4 ...
- ExtJs xtype类型介绍
自定义组件在定义的时候可以通过xtype配置为组件指定xtype短名称,此后创建对象可以通过xtype来创建自定义对象了,示例代码如下: Ext.define('MyApp.PressMeButton ...
- block 在ARC和非ARC下的不同含义
Block的循环引用 对于非ARC下, 为了防止循环引用, 我们使用__block来修饰在Block中使用的对象: 对于ARC下, 为了防止循环引用, 我们使用__weak来修饰在Block中使用的对 ...
- Qt5.5.1 学习笔记
添加图标(.pro): RC_ICONS = 1.ico RC_FILE = 1.rc 新建 1.rc 内容:IDI_ICON1 ICON "1.ico" 支持c++11(. ...
- 读书笔记-String
[String]就是对char[]数组进行封装的对象,由三部分组成: 1, char数组:它是String对象所表示的字符串的超集: 2, 3, offset和count,表示了String对象表示的 ...
- Thinkphp .htaccess 与 httpd.ini文件重定向转换问题
.htaccess 文件内容 RewriteEngine OnRewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !- ...
- 【Network】高性能 UDP 服务应该怎么搞?
参考资料: Netty系列之Netty高性能之道 C++高性能服务框架revover:rudp总体介绍(可靠UDP传输) - zerok的专栏 - 博客频道 - CSDN.NET 高性能异步Socke ...
- Expression表达式树
表达式树表示树状数据结构的代码,树状结构中的每个节点都是一个表达式,例如一个方法调用或类似 x < y 的二元运算 1.利用 Lambda 表达式创建表达式树 Expression<Fun ...