Javascript图片上传前的本地预览实例


Posted in Javascript onJune 16, 2014

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有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>
Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
javascript 定义新对象方法
Feb 20 Javascript
JS链式调用的实现方法
Mar 07 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 #Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 #Javascript
js限制文本框只能输入数字方法小结
Jun 16 #Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 #Javascript
You might like
做个自己站内搜索引擎
2006/10/09 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
Python3实现Web网页图片下载
2016/01/28 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python实现ID3决策树算法
2018/08/29 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Python如何生成xml文件
2020/06/04 Python
Python常用类型转换实现代码实例
2020/07/28 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
python如何快速拼接字符串
2020/10/28 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
竞选副班长演讲稿
2014/04/24 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
联谊活动总结范文
2015/05/09 职场文书
2019年入党思想汇报
2019/03/25 职场文书