Javascript图片上传前的本地预览实例
图片的上传预览功能主要用于图片上传前的一个效果的预览，目前主流的方法主要有js，jquery与flash实现，但我们一般都会使用js来实现图片上传预览功能，下面来看一个例子。
原理:
分为两步：当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL（对象URL）；把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。
在这里，我们需要了解Javascript里File对象、Blob对象和window.URL.createObjectURL()方法。
File对象:
File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.
下面来看获取FileList对象：
<script type="text/javascript" src="jquery.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
// 获取FileList的第一个元素
alert(document.getelementbyid('upload').files[0]);
});
</script>
Blob对象：
一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.
我们想要得到的对象URL实际上就是从Blob这个对象获取的，因为File的接口继承Blob。下面就来把Blob对象转换成URL：
<script type="text/javascript">
var f = document.getelementbyid('upload').files[0];
var src = window.URL.createObjectURL(f);
document.getElementById('preview').src = src;
</script>
兼容性：
上述方法适用于chrome浏览器
如果是IE浏览器可以直接使用input的value来代替src
网上查看资料有直接使用File对象的getAsDataURL()方法获取URL的，现在这个方法都已经废除，类似的还有getAsText()和getAsBinary()方法,我们来看这样一个例子。
function getFullPath(obj) { //得到图片的完整路径
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
这段代码是获取客户端图片的完整路径
我们再限制其大小和格式
$("#loadFile").change(function () {
var strSrc = $("#loadFile").val();
img = new Image();
img.src = getFullPath(strSrc);
//验证上传文件格式是否正确
var pos = strSrc.lastIndexOf(".");
var lastname = strSrc.substring(pos, strSrc.length)
if (lastname.toLowerCase() != ".jpg") {
alert("您上传的文件类型为" + lastname + "，图片必须为 JPG 类型");
return false;
}
//验证上传文件宽高比例
if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {
alert("您上传的图片比例超出范围，宽高比应介于1.25-1.5");
return;
}
//验证上传文件是否超出了大小
if (img.fileSize / 1024 > 150) {
alert("您上传的文件大小超出了150K限制！");
return false;
}
其中，loadFile是html input file的id。在它的change事件，也就是选择了要上传的文件以后，让图片显示在图片框里吗，在上面代码的最后加上以下代码
$("#stuPic").attr("src", getFullPath(this));
既然用到了jQuery,下面我们再分享一个用jQuery的写的代码实例：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide("slow");
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>
相关推荐
-
用js实现预览待上传的本地图片
<form name="form5" id="form5" method="post" action="#"> <input type="file" name="file5" id="file5" onchange="preview5()"/> </form> <script type="text
-
基于JavaScript实现本地图片预览
本文实例为大家分享了js本地图片预览的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <!-- <!DOCTYPE html>一定要放在第一行,除非上面都是空行 在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的. 在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<inpu
-
js本地图片预览实现代码
本文实例为大家分享了js本地图片预览实例,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divPreview"> <img id="imgHeadPhoto" src="noperson.jpg" style="wid
-
javascript firefox不显示本地预览图片问题的解决方法
复制代码 代码如下: <img id="img1" src=""/> <script> function fileChange(obj) { var url = obj.value url = "file:///" + url.replace("\\",'/'); alert(url); document.getElementById("img1").src= url; } <
-
JS预览图像将本地图片显示到浏览器上
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"&
-
详解nodejs实现本地上传图片并预览功能（express4.0+）
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\"+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览.前端采用通过ajax方式上传文件,使用FormData进行ajax请求 ,nodejs端采用multiparty模块 相关查看文档: 通过Ajax
-
在页面预览客户端本地图片的js代码(兼容FF IE)
公司最近有个项目有这样的需求我才发现我之前写的 如何通过JS获取用户本地图片路径 这篇文章里所使用的方法只支持本地页面预览本地图片 有一种解决方法是上传到服务器后返回相对路径 但是效率是个问题,编程复杂度也会提高 直接上demo代码 为更多有这种需求又苦于找不到解决方案的同行提供源码 转载请注明出处 我这里还有更多的其他问题的解决方案供更多人参考 get file input full path function getFullPath(obj) { var newPreview = docum
-
JavaScript实现图片本地预览功能【不用上传至服务器】
本文实例讲述了JavaScript实现图片本地预览功能.分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览.不用预上传到服务器,整缩略图再打回前端用Ajax去预览的.直接利用JavaScript即可以完成,而且还可以兼容IE6.具体效果,如下图所示: 具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
-
纯JS实现本地图片预览的方法
本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript
-
原生js FileReader对象实现图片上传本地预览效果
本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
javascript IE7 浏览器本地图片预览
说明: 在对象容器边界内,在对象的背景和内容之间显示一张图片.并提供对此图片的剪切和改变尺寸的操作.如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供. 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) enabled:可选项.布尔值(Boolean).设