JS实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间。找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到。
以下是实现的代码:
大体上前台预览有两种,第一种是把图片在浏览器上做缓存,然后获取缓存地址;第二种是将图片转换为base64 字符串。
一、将图片在浏览器上做缓存
body:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" 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>
js:
function setImagePreview(avalue) {
var docObj = document.getElementById("doc");
var imgObjPreview = document.getElementById("preview");
if(docObj.files && docObj.files[0])
{
//火狐下,直接设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[0]);
}
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;
}
这样就实现了图片的预览。
二、将图片转换为base64格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <form enctype="multipart/form-data" method="post" action="/file/upload">
<input onchange="previewImage(this, 'prvid')" type="file" name="file"/>
<input type="submit" value="上传"/>
</form>
<div id="prvid">预览容器</div>
</body>
<script type="text/javascript">
function previewImage(file, prvid) {
/* file:file控件
* prvid: 图片预览容器
*/
var tip = "Expect jpg or png or gif!"; // 设定提示信息
var filters = {
"jpeg" : "/9j/4",
"gif" : "R0lGOD",
"png" : "iVBORw"
}
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
if (window.FileReader) { // html5方案
for (var i = 0, f; f = file.files[i]; i++) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
if (!validateImg(src)) {
alert(tip)
} else {
showPrvImg(src);
}
}
fr.readAsDataURL(f);
}
} else { // 降级处理 if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
alert(tip);
} else {
showPrvImg(file.value);
}
} function validateImg(data) {
var pos = data.indexOf(",") + 1;
for ( var e in filters) {
if (data.indexOf(filters[e]) === pos) {
return e;
}
}
return null;
} function showPrvImg(src) {
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
}
}
</script>
</html>
JS实现的图片预览功能的更多相关文章
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- HTML5实现图片预览功能
两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- 34)django-上传文件,图片预览功能实现
目录 文件上传 1)form表单提交上传(会刷新) 2)ajax上传 3)iframe 4)图片上传预览(思路保存文件的时候,把文件保存文件的路径反馈回,客户端 ...
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript图片上传前的图片预览功能
JS代码: //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, imgPreviewI ...
随机推荐
- Swift Optional Chaining
Optional Chaining介绍 关于「optional chaining」,<The Swift Programming Language>是这么描述的: Optional cha ...
- vuex 命名空间
默认情况下,模块内部的action mutation getter是注册在全局命名空间的,如果希望你的模块具有更高的封装度和复用性,你可以通过添加namespaced:true的方式使其成为带命名空间 ...
- windows install JDK&&JRE
重装系统后,安装的java环境没了,只能重装一下~~~~ 1.下载JDK 2.这里会安装两次,其中第一次为安装 JDK,第二次安装JRE,建议不要将这两个放在同一个文件夹. 3.配置环境变量 用鼠标右 ...
- 想要删除table的某一行的js写法
<tr><td onclick="del_tr(this)" >删除</td></tr> // 删除一行 function del_ ...
- pdf2swf 转换时报This file is too complex to render- SWF only supports 65536 shapes at once
ERROR ID Table overflow ERROR This file is too complex to render- SWF only supports 65536 shapes ...
- python 之元类
定义类的两种方法: 1.class定义 2.type(类名,类的基类们,类的名称空间) # 定义类的三要素:类名.基类.名称空间 class_name = 'Chinese' class_bases ...
- TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建
1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...
- 别用visual editor了,用WindowBuilder
以前利用 Eclipse Visual Editor 项目构建 GUI,现在用WindowBuilder吧. 官网说: The Visual Editor project has been archi ...
- Android 电脑投屏工具Vysor Pro介绍
Chrome的插件,直接到chrome的扩展程序里面搜索Vysor,安装即可 如何破解: C:\Users\lanlan.shi\AppData\Local\Google\Chrome\User Da ...
- LeetCode: 496 Next Greater Element I(easy)
题目: You are given two arrays (without duplicates) nums1 and nums2 where nums1’s elements are subset ...