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 学习之旅 (1)
Feb 05 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
js实现车辆管理系统
Aug 26 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
浅谈js闭包理解
2019/04/01 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
简单谈谈Python中函数的可变参数
2016/09/02 Python
python如何获取服务器硬件信息
2017/05/11 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
文化建设工作方案
2014/05/12 职场文书
绿色小区申报材料
2014/08/22 职场文书
学习张林森心得体会
2014/09/10 职场文书
劳资员岗位职责
2015/02/13 职场文书
讲文明倡议书
2015/04/29 职场文书
学生通报表扬范文
2015/05/04 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers