<!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>
分享到：
相关推荐
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
在这个"jquery 本地上传图片预览Demo"中，我们将关注jQuery插件的应用，尤其是与图片预览相关的技术。 首先，本地图片预览功能的核心在于读取用户选择的文件，并在不实际上传的情况下在浏览器中显示。在HTML5中，...
在IT行业中，尤其是在Web开发领域，用户经常需要上传图片，而提供一个图片上传前的预览功能能够极大地提升用户体验。这个“jquery图片上传前预览 无需上传至服务器”的技术方案，就是解决这一问题的一种方法。它允许...
本文将深入探讨如何使用jQuery实现一个简单的图片上传预览功能，这是一个常见的需求，尤其在网页表单中，用户需要在提交之前查看所选图片的效果。 首先，我们需要明白图片预览的基本原理。在用户选择图片文件后，...
**jQuery实现的图片预览插件(imgPreview)详解** 在Web开发中，用户在上传或浏览图片时，能够实时预览图片是一项非常重要的功能。jQuery的imgPreview插件提供了一个简单且高效的解决方案，使得开发者可以轻松地在...
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
本文将深入探讨“jQuery上传图片预览”这一主题，这在Web开发中是一个常见且实用的功能，特别是在用户需要在提交之前查看上传图片效果的场景。 首先，我们需要了解jQuery中的`<input type="file">`元素。这个HTML...
3. **上传图片**：使用Ajax技术，将图片数据发送到服务器，无需刷新页面。 4. **进度反馈**：在上传过程中，提供上传进度信息，提升用户体验。 5. **错误处理**：处理可能出现的网络问题或服务器响应错误。 对于...
本文将深入探讨“jQuery上传图片预览插件”，这是一个实用的工具，旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能，尤其在处理图片大小调整和等比例缩放方面表现卓越，同时兼容...
在网页开发中，图片预览是一项常见的需求，特别是在用户上传图片或者查看大图时，能够实时预览图片的效果显得尤为重要。jQuery，一个广泛使用的JavaScript库，提供了丰富的API和方法来简化这种操作。本文将深入探讨...
"jQuery实现上传图片源码 1.0.zip" 包含了一个名为 "FBPictureUpload" 的文件，它是一个示例项目，用于帮助初学者掌握jQuery在图片上传中的应用。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件...
在网页开发中，图片上传预览是一个常见的功能，它允许用户在正式上传图片之前查看预览效果，确保图片质量和格式符合需求。这个功能通常通过JavaScript库实现，而jQuery作为一个广泛使用的JavaScript库，提供了便利的...
《jQuery实现多文件上传与预览功能详解》 在Web应用中，文件上传是一个常见的功能需求，尤其是在社交网络、在线教育、图片分享等场景中。jQuery作为一款强大的JavaScript库，为开发者提供了丰富的API和插件，使得...
3. **图片预览**：用户在选择图片后，可以立即在页面上预览压缩后的效果。这通常通过`FileReader`对象的`readAsDataURL()`方法将图片转换为数据URL，然后设置到`<img>`标签的`src`属性来实现。 4. **jQuery库**：...
本文将深入探讨使用jQuery和PHP实现图片上传预览的技术细节，以及如何结合头像上传进行预览。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML DOM操作、事件处理、动画和Ajax交互。在图片上传预览中，...
在本文中，我们将深入探讨如何利用jQuery实现一个图片上传预览功能，这是一个用户友好的特性，尤其在处理图像上传时，能够提供即时的反馈，提升用户体验。 首先，我们需要理解jQuery的核心概念。jQuery通过一种简洁...
在CSS文件（`srdz.preview.2.0.css`）中，我们定义了按钮的样式，使其看起来像一个可点击的区域，同时隐藏了实际的文件输入控件，使得用户只能看到“上传图片”的文本。 ```css .btn-pic { display: block; ...