简单获取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命令后却 ...
随机推荐
- Android 全屏显示
Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...
- 简单实现div遮罩
顾名思义,div遮罩就是将网页上的一部分用div遮盖起来,防止用户误点,因此div遮罩的一个用途就是将table设置为不可编辑. 作者通过查找资料,并进行简单的测试,最终完成了以下几段简单代码,来实现 ...
- IO基础
流向: 输入流:从硬盘到java 程序 (读数据) 输出流:从java 到硬盘 (写数据) 数据类型: 字节流: {用记事本打开,不能读懂,用 字节流} 输入: InputStrea ...
- autolayout的各种坑
xocde7的autolayout 在viewDidLoad之前, 使用frame改变布局是没有用的, 简单的视图才可以使用autolayout, 稍微复杂写的都要使用代码来编写 获取当前view的宽 ...
- SVN版本冲突解决
解决冲突有三种选择: A.放弃自己的更新,使用svn revert(回滚),然后提交.在这种方式下不需要使用svn resolved(解决) B.放弃自己的更新,使用别人的更新.使用最新获取的版本覆盖 ...
- Python 学习笔记四
接着三继续写http://www.cnblogs.com/dzzy/p/5295019.html 文件和函数操作: from sys import argv script,input_file=arg ...
- zabbix之php安装
转载自: http://www.ttlsa.com/nginx/nginx-php-5_5/ php下载 https://pan.baidu.com/s/1qYGo8bE
- 使用uwsgi 部署python web服务
uwsgi, wsgi协议的一个很好的实现,源码在这里:https://github.com/unbit/uwsgi c语言编写,有兴趣可以研究下. 上DEMO: wsgi_server.py def ...
- centos PIL 安装
http://itekblog.com/centos-6-x-install-pil-python-imaging-library-tutorial/
- powerdesigner反向
1.Could not initial JVM不能初始化 :要求安装32位的JDK,把path指向32的安装目录 2.Non SQL Error : Could not load class orac ...