<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
var picPath;
var image;
// preview picture
function preview()
{
document.getElementById('preview').style.display = 'none';
//验证上传文件格式是否正确
var pos = picPath.lastIndexOf(".");
var lastname = picPath.substring(pos, picPath.length)
if (lastname.toLowerCase() != ".jpg") {
alert("您上传的文件类型为" + lastname + "，图片必须为 JPG 类型");
return false;
}
//验证上传文件宽高比例
if (image.height / image.width > 1.5 || image.height / image.width < 1.25) {
alert("您上传的图片比例超出范围，宽高比应介于1.25-1.5");
return;
}
//验证上传文件是否超出了大小
if (image.fileSize / 1024 > 150) {
alert("您上传的文件大小超出了150K限制！");
return false;
}
// 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
document.getElementById('box').innerHTML = "<img width='"+image.width+"' height='"+image.height+"' id='aPic' src='"+picPath+"'>";
}
// show view button
function buttonShow()
{
/*
这里用来解决图片加载延时造成的预览失败.
简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，
这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
这里我仍然有一个困惑，在IE7下预览效果偶尔会失效.
*/
if ( image.width == 0 || image.height == 0 ) {
setTimeout(buttonShow, 1000);
} else {
document.getElementById('preview').style.display = 'block';
}
}
/*加载图片*/
function loadImage(ele) {
picPath = getPath(ele);
image = new Image();
image.src = picPath;
/*一秒钟后调用显示预览按钮函数*/
setTimeout(buttonShow, 1000);
}
//得到图片的完整路径
function getPath(obj)
{
if(obj)
{
//ie
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if(window.navigator.userAgent.indexOf("Firefox")>=1)
{
if(obj.files)
{
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
</script>
</head>
<body>
<input type="file" name="pic" id="pic" onchange='loadImage(this)' />
<input id='preview' type='button' value='preview' style='display:none;' onclick='preview();'>
<div id='box'></div>
</body>
</html>
分享到：
相关推荐
实用JS，jQuery实现上传图片的预览功能，可以跟随鼠标移动
Jquery 表单验证+本地图片上传-切割-预览 完全项目 希望不要用于商业用途
在网上找到一个高手写本地图片上传预览的插件，测试通过ie6，ff2.0、3.6，做成个Demo拿来和大家分享，jsp实现
jQuery实现图片上传预览 支持ie69.zip
jquery;图片上传;图片上传预览 无需任何插件实现
jQuery图片上传压缩预览代码是一款基于HTML5实现的带图片压缩显示功能代码。
NULL 博文链接：https://deng19891006.iteye.com/blog/933486
使用jquery 预览图片并实现无刷新上传 使用了jquery.ajaxfileupload.js插件实现无刷新上传
一般我们在上传图片后会在网页中出现预览而不保存到数据库，该部分代码就是实现上传的图片在网页中的显示，让用户确定后在上传。
主要为大家详细介绍了基于JQuery实现图片上传预览与删除操作的相关代码，感兴趣的小伙伴们可以参考一下
JQuery图片上传预览，是图片上传很好的一种实现方式，只支持单个图片上传。
java实现jQuery带删除功能多图片上传预览插件 另带一个使用junit编写的测试类 使用eclipse创建maven项目
jQuery+HTML5实现图片上传前预览效果，代码简洁，方便使用。
jquery文件上传插件（多文件选择、带进度条 ,图片预览）
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现...DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> ; charset=UTF-8"> <script src="https://www.jb51.net
p+jquery（jcrop）实现的图片上传前先进行剪切预览，导入即用。
本文实例为大家分享了jQuery上传图片...HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> [removed][removed] <style> .hide { display:none;
本文实例讲述了jQuery实现图片上传预览效果功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传...