JS上传图片本地实时预览缩略图
HTML 代码如下
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag" style="border: 1px solid red;">
<img id="preview" src="" width="100" height="100" style="display: block;border: 1px solid blue;" />
</div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;">
<form method="get" action="xznetwork" name="textfile">
<input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePreview();">
</form>
</td>
</tr>
</tbody>
</table>
</body>
JavaScript 代码如下 //下面用于图片上传预览功能
function setImagePreview(avalue) {
//input
var docObj = document.getElementById("doc");
//img
var imgObjPreview = document.getElementById("preview");
//div
var divs = document.getElementById("localImag");
if (docObj.files && docObj.files[0]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '100px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
} else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "100px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch(e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
JS上传图片本地实时预览缩略图的更多相关文章
- RunJS推荐用于个人使用（使用方便JS、css实时预览、编辑、管理等功能）
RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自己主动完毕等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/ waterm ...
- JS 上传图片时实现预览
网页中一张图片可以这样显示: <img src="http://www.letuknowit.com/images/wg.png"/>也可以这样显示:<img s ...
- 原生js上传图片时的预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- js 实现图片实时预览
<body> 上传图片: <input type="file" name="file" style="width: 200px; h ...
- js实现图片实时预览
注: 此博客转自 http://www.cnblogs.com/goody9807/p/6064582.html 转载请注明出处 <body> 上传图片: <input type= ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- （JavaScript）实现上传图片实时预览和（文件）大小判断
唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!! 昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL ...
随机推荐
- HDU 4893 Wow! Such Sequence!(2014年多校联合 第三场 G)（线段树）
磨了一天的线段树,不能说完全搞清楚,只能说有一个大概的了解,靠着模板才把这道题A了,只能说太弱~~! 题意: 初始时有一字符串,全为0. 三种操作: 1 k d - add 把d加到第k个数上去2 ...
- hdu 5138
参考……!!!! #include <iostream> #include <cstdio> #include <cmath> #include <cstri ...
- Problem D: Flip Five
大致题意:3 * 3的黑白格,在翻转的时候会本身和四周的都翻转,问最小翻转几次变成全部是白色解题思路:把3 * 3 = 9 个格子进行全排列,然后穷举然后找翻转的最小次数 #include <i ...
- cocos2d-x关于CCTableView的“乱序问题”的理解
Cocos2d-x有一个不错的控件CCTableView.之前用的时候发现有cell的顺序错乱和重复出现的问题.后来仔细看了一下源码,发现是自己用法错误.但是网上有人说是一个bug,要改源码.我发现2 ...
- OpenStreetMap初探（一）——了解OpenStreetMap
1. 開始关注OpenStreetMap始于此博文:<微软对抗谷歌的秘密武器:开源地图OpenStreetMap> http://news.csdn.net/a/20120328/313 ...
- Attach()函数和Detach()函数的作用
基本就是把一个句柄绑定和解绑定于一个类对象上,是其可以使用MFC的函数而不是API 首先,你要明白Windows对象和MFC对象的区别.MFC对象实际上并没有把整个Windows对象都包装在其中,它只 ...
- VC/MFC ListCtrl 控件功能使用汇总（转）
以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏.如 ListView_InsertCol ...
- JSP中两种include的区别
首先说明这两种都是什么: <%@ include file=”relativeURI”%> 可以叫作静态include(静态包含),是jsp指令中的一种,(JSP指令控制JSP编译器如何去 ...
- unity中怎样获取全部子物体的组件
public GameObject[] obj; void Awake() { for (int i = 0; i < obj.Length; i++) ...
- Oracle 验证IOT表数据存储在主键里
iot表测试: 在create table语句后面使用organization index,就指定数据表创建结构是IOT.但是在不指定主键Primary Key的情况下,是不允许建表的. create ...