简单获取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命令后却 ...
随机推荐
- HomeWork2
程序一: 1 public intfindLast(int[] x, inty) { 2 //Effects: If x==null throw NullPointerException 3 // e ...
- CentOS7.0安装Nginx 1.7.9
一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib ...
- 外国类似stackoverflow这样的网站访问慢怎么解决-遁地龙卷风
第二版 百度搜索蓝灯 下载桌面版 双击运行 如果打开的浏览器不是你想要的 拷贝地址栏地址给你想要的浏览器 一切就ok了!!!!! 建议不访问国外网站时,便将蓝灯关掉,否则在访问一些不开蓝灯能够正常访问 ...
- [Asp.net MVC]Asp.net MVC5系列——添加模型
目录 概述 添加模型 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 概述 在本节中我们将追加 ...
- sizeof和小部分c++语法
ios 中 sizeof(类型) 获取类型所占字节 32位操作系统中, 每个字节占8个位 64位操作系统中, 每个字节占16个位 INT_MAX 2147483647 int size1 = siz ...
- Java文件操作工具类(复制、删除、重命名、创建路径)
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import ...
- Extjs String转Json
var jsonStr= '{ "name": "zhangsan", "age": "18" }'; var json ...
- ubuntu 安装 phpmyadmin
安装步骤 1 apt-get install phpmyadmin 2 安装完后默认的安装位置是在/usr/share 而不是在/var/www 所以 需要将其链接到/var/www来,复制的话貌似需 ...
- H-Index I & II
H-Index I Given an array of citations (each citation is a non-negative integer) of a researcher, wri ...
- cf555b
题意:按顺序给出多个互不相交的区间(表示一些小岛),和一些可以连接区间的桥,每个桥有固定的长度.区间和桥的数量都是2*10^5. 两个相邻的小岛之间的桥的长度必须小于等于最远点距离,大于等于最近点距离 ...