获取input file 选中的图片,并在一个div的img里面赋值src实现预览
代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上
【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;
}
});
});
【html代码】:
<input id=
"file_upload"
type=
"file"
/>
<div class=
"image_container"
>
<img id=
"preview"
width=
"60"
height=
"60"
>
</div>
获取input file 选中的图片,并在一个div的img里面赋值src实现预览的更多相关文章
- 简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览图片
html代码: <input id="file_upload" type="file" /> <div class="image_c ...
- 怎么简单获取input file 选中的图片,并在一个div的img里面赋值src实现预览?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- js获取input file完整路径的方法
function getPath(){ //判断浏览器 var Sys = {}; var obj = document.getElementById("headImg"); ...
- js获取input file文件二进制码
<html> <body> <img id="image"src=""/> <br/> <input ty ...
- layui 图片与表单一起提交 + layer.photos图片层预览
HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> ...
- js获取 input file 图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery如何获取input(file)控件上传的图片名称,即"11111.jpg"
html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$( ...
- js 获取input file路径改变图像地址
html代码 <img id="newImage" alt="100x100" src="__PUBLIC__/img/1.jpg" ...
- Js/Jquery获取input file的文件名
html代码: <input type="file" name="file" id="file" class="in ...
随机推荐
- 手把手教你用vue-cli构建一个简单的路由应用
上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目, ...
- cogs 1456. [UVa 10881,Piotr's Ants]蚂蚁
1456. [UVa 10881,Piotr's Ants]蚂蚁 ★ 输入文件:Ants.in 输出文件:Ants.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述 ...
- 安卓MP3播放器开发实例(3)之进度条和歌词更新的实现
上一次谈了音乐播放的实现,这次说下最复杂的进度条和歌词更新.因为须要在播放的Activity和播放的Service间进行交互,所以就涉及了Activity对Service的绑定以及绑定后数据的传输,这 ...
- 最小生成树-并查集-Kruskal-zoj-2048-special judge
Highways description The island nation of Flatopia is perfectly flat. Unfortunately, Flatopia has a ...
- vim插件之ack
这个插件其实是实现vim内部搜索功能的今天在学习vim搜索的时候,遇到了一个ack.vim的插件,这个插件给我们提供了一个并行于系统命令grep的搜索命令Ack 它的下载地址是 https://git ...
- js的类和继承
因为我使用java语言入门的编程,所以对javascript的类和继承有种想当然一样,或者是差不多的感觉,但实际上两者还是有很多不同的 首先我们说类,javascript中类的实现是基于原型继承机制的 ...
- (MySQL里的数据)通过Sqoop Import HBase 里 和 通过Sqoop Export HBase 里的数据到(MySQL)
Sqoop 可以与HBase系统结合,实现数据的导入和导出,用户需要在 sqoop-env.sh 中添加HBASE_HOME的环境变量. 具体,见我的如下博客: hadoop2.6.0(单节点)下Sq ...
- Linux系统下到哪儿寻找硬件错误
Linux系统下到哪儿寻找硬件错误 当linux系统出现故障的时候,作为管理员首先要定位错误,现在linux有许多工具都能帮助用户寻找错误,要学会利用他们确定问题.这些工具包括dmesg. ...
- hadoop常用指令
1.格式化名称节点:hadoop namenode -format 2.操作hadoop文件系统:hadoop fs -ls / 3.设置ubuntu默认以命令行方式启动 sudo gedit /et ...
- 【习题 8-12 UVA - 1153】Keep the Customer Satisfied
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 结束时间比较早的,就早点开始做. 所以,将n件事情,按照结束时间升序排. 然后对于第i件事情. 尽量把它往左排. 即t+1..t+a ...