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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 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
一个数据采集类
2007/02/14 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP多维数组排序array详解
2017/11/21 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
JS之小练习代码
2008/10/12 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
js实现开关灯效果
2020/03/30 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python线程创建和终止实例代码
2018/01/20 Python
python找出完数的方法
2018/11/12 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
如何做好总经理助理
2013/11/12 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
产品质量保证书
2014/04/29 职场文书
物流专业求职信
2014/06/30 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS