简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
2016-02-29 10:27
519 查看
html代码:
jquery代码:
<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; } }); });
相关文章推荐
- sh里判断系统和32/64
- Android Studio 加快编译速度
- android 一个手机可以打开 另一个手机打开就崩溃
- 【leetcode】【29】Divide Two Integers
- Android解耦库EventBus的使用和源码分析
- Java中如何遍历Map对象的4种方法
- 软件定义网络SDN(特点、实现途径与展望)
- JMS简介与ActiveMQ实战
- 从linux系统mysql导出数据库
- javascript学习记录
- 高仿最美应用项目源码
- 助店宝微信商城登录流程图
- 一个js的动画,以前以为只有flash可以实现
- Microsoft SQL Server 数据库
- 201602读书分享——《干法》不能放弃的是你自己对自己人生应付的责任
- http://blog.csdn.net/vipzjyno1/article/details/22098621
- 查找最少标记点 (贪心)
- Android优化——UI优化(四) 使用stytle
- C++先序遍历输入树的创建
- 【DSP开发】CMD文件