最近发现了个js传图预览的函数和大家分享下
由于浏览器js沙箱,存在不同域,js无法直接调用电脑文件。在之前做传图预览的时候,基本的思路就是,
将图片先保存到服务器中缓存,然后返回一个服务器路径,并显示出图片,然而这样很耗缓存目录文件的。方法也比较复杂。
很幸运,发现了个可以直接预览图片的js
代码如下:(测试过火狐和chrome,都能够支持。在ie中,只支持ie8,还是不够完善,如有大神请指教)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By:DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc"); var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[])
{
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[]);
}
else
{
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
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;
} </script>
</head> <body>
<table width="100%" border="" cellspacing="" cellpadding="">
<tbody>
<tr>
<td height="" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="" height="" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
最近发现了个js传图预览的函数和大家分享下的更多相关文章
- js多图预览及上传功能
<%-- Created by IntelliJ IDEA. User: Old Zhang Date: 2018/12/27 Time: 11:17 To change this templa ...
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- js上传和预览图片
[1].[代码] [HTML]代码 跳至 [1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- Jcrop+uploadify+php实现上传头像预览裁剪
最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
随机推荐
- 4 多表代替密码之Hill 密码 2实现
该解密方法的KEY 不是一个数或者一段字符串,而是一个矩阵, 比如有个3*3的KEY: 那么如果我们要加密一个长度为N的字符串, 那么把N除以3,分成M个3个字母组成的小段, 对每个小段尽心加密: 1 ...
- job console部署
1. iis配置 1.1 应用程序池配置成经典模式 1.2 增加mini类型.svc,application/octet-stream 1.3 增加脚本映射,*.svc,%windir%\Micros ...
- 我是一只IT小小鸟----读书笔记
人生如同打牌,能抓到一手好牌固然是运气好,但重要的是,你不能靠运气生活,而要琢磨怎样把手上这把看上去“不怎么样的”牌打好. 要了解一种主流的软件开发与运行平台,熟练掌握一种开发工具,这样就具备了进行开 ...
- 探索软件工程道路上的我II (Θ∀Θ#)
------作业要求------ 第一版本程序Prog1:+ 给定一个数组,实现数组元素求和:具体要求:实现对一维数组(a[100])的所有元素相加运算.+ 数据准备:a)数组长度:100:b)数组数 ...
- Objective-C 中,atomic原子性一定是安全的吗?
我们在学习OC的时候认为,atomic使用了原子性,保证了线程安全,事实真的是这样吗? nonatomic的内存管理语义是非原子性的,非原子性的操作本来就是线程不安全的,而atomic的操作是原子性的 ...
- jQuery学习总结
1:jQuery是什么 jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库,兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, O ...
- gdb调试方法
先打开 gdb 的调试选项: -g 串口端: ./gdb-server 10.12.2.100:12345 ./Kylin 服务器端: (1)./gdb ./Kylin (2) targ ...
- Python 基礎 - 文件操作_v2
嗯,那如何要把游標的位置給打印來? #!/usr/bin/env python3 # -*- coding:utf-8 -*- f = open('test', 'r') print(f.tell() ...
- response 设置头的类型 (转)
Response.ContentType 详细列表 不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 text/html 也就是网页格式.代码如: <% r ...
- android 判断是否设置了锁屏密码
方式1:在小米note手机上测试,只能判断是否设置了图形解锁. android.provider.Settings.System.getInt(getContentResolver(), androi ...