简单获取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命令后却 ...
随机推荐
- C++ 模板函数与模板类
一.模板函数 函数模板提供了一类函数的抽象,即代表了一类函数.当函数模板被实例化后,它会生成具体的模板函数.例如下面便是一个函数模板:
- Android中对Log日志文件的分析[转]
一,Bug出现了, 需要“干掉”它 bug一听挺吓人的,但是只要你懂了,android里的bug是很好解决的,因为android里提供了LOG机制,具体的底层代码,以后在来分析,只要你会看bug, a ...
- 9.4---集合子集(CC150)
这题非常复杂.牛客网上对应的题目对结果要求比较苛刻,所以要调整. 整体思路是:先放进去一个,然后第二个来的时候插入到已有的,并且把自己也放进去. public static ArrayList< ...
- phpcms get标签用法
{pc:get sql="SELECT t.*,n.*,n.typeid nt FROM v9_type t LEFT JOIN v9_news n ON n.typeid=t.typeid ...
- 自带openJDK,如何切换成Oracle JDK
1.去Oracle官网下载最新的jdk,解压,配置环境变量(直接改 /etc/profile) 参考:http://www.cnblogs.com/aaronhoo/p/5293118.html 2. ...
- ubuntu 安装 phpmyadmin
安装步骤 1 apt-get install phpmyadmin 2 安装完后默认的安装位置是在/usr/share 而不是在/var/www 所以 需要将其链接到/var/www来,复制的话貌似需 ...
- ubuntu14.04 server安装gnome-desktop
You can install the default Ubuntu desktop by executing the following: sudo apt-get install ubuntu-d ...
- C#之文本操作
[转载]C#文件操作大全(SamWang) 文件与文件夹操作主要用到以下几个类: 1.File类: 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. msd ...
- POJ 1661
http://poj.org/problem?id=1661 这是一道DP的题目,求最优解 上面的这一个题是对于那个重左边开始上的函数的解释 题目要求的是从最高掉下来的小时间,那么我们就可以求从最低处 ...
- WebViewer报错Error loading document: Invalid XOD file: Zip end header data is wrong size!
错误:Error loading document: Invalid XOD file: Zip end header data is wrong size! 解决:https://groups.go ...