<!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">
<head runat="server">
<title></title>
<meta content="" name="Keywords" />
<meta content="" name="Description" />
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/uploadPreview.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("[type=file]").change(function(){
//预览图片
var $img = $(this).next();
//最大 1M
var maxSize = 1024;
//获取文件大小
var fileSize = this.files[0].size/1024;
if(fileSize>maxSize){
alert('文件过大最大为：' + maxSize + ' KB ');
return false;
};
//后缀正则表达式
var reg = /^.+[.]png|.+[.]gif|.+[.]jpeg|.+[.]jpg|.+[.]bmp$/;
var val = $(this).val();
if(reg.test(val)==false){
alert('图片格式不正确,包含以下格式[gif,jpeg,jpg,bmp,png]');
return false;
}
if($.browser.msie){//判断是否为ie浏览器
$img.attr("src",$(this).val())
}else{//不是IE浏览器
var objUrl=getObjectURL(this.files[0]);
console.log("objUrl="+objUrl);
if(objUrl){
$img.attr("src",objUrl);
}
}
})
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}else{
alert('浏览器不支持预览功能！');
}
return url ;
}
});
</script>
</head>
<body>
<form id="form" method="post">
<input type="file" />
<img class="img"/>
</form>
</body>
</html>
分享到：
相关推荐
在IT领域，尤其是在Web开发中，用户界面的交互性至关重要，而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片，提高了上传过程的可控性和便捷性...
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
在本文中，我们将深入探讨如何使用jQuery实现本地图片上传预览功能，这是一项常见的Web开发需求，尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互...
本教程将详细讲解如何利用jQuery实现一个图片上传时的本地预览功能，同时具备等比例缩放和文件类型判断的能力，并确保在主流浏览器如IE、Firefox和Chrome中运行良好。 首先，我们要理解`jquery 上传图片本地预览`这...
总结来说，"jquery图片上传前预览 无需上传至服务器"这一技术方案利用了jQuery、HTML5的File API和Canvas等技术，实现了图片的本地预览和剪切，提高了用户交互的便捷性和效率，同时也减轻了服务器的压力。...
通过以上步骤，我们实现了基于jQuery的图片上传本地预览功能。这个功能不仅提高了用户体验，还减轻了服务器的压力。需要注意的是，由于生成的URL是临时的，当浏览器关闭或刷新时，这些URL将失效。因此，这个预览方法...
总结，"jQuery实现上传图片源码 1.0.zip" 提供了一个学习和实践的平台，涵盖了从选择图片、预览、无刷新上传到兼容不同浏览器的关键技术。通过理解和运用这些技术，开发者可以创建出更符合现代网页标准的图片上传...
本文将深入探讨“jQuery上传图片预览”这一主题，这在Web开发中是一个常见且实用的功能，特别是在用户需要在提交之前查看上传图片效果的场景。 首先，我们需要了解jQuery中的`<input type="file">`元素。这个HTML...
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8，而且chrome 火狐最新版本也有问题，自己动手丰衣足食。分享给给大家。
在这个主题中，我们将探讨如何使用纯jQuery实现图片上传预览，不依赖任何外部插件。 首先，我们需要了解HTML中的`<input type="file">`元素，它是用于让用户选择本地文件的。通过监听此元素的`change`事件，我们...
本文介绍的知识点将围绕如何使用jQuery来实现图片上传并进行本地预览这一主题展开，详细说明了页面元素属性的动态操作技巧。 知识点一：理解jQuery与文件上传 jQuery是一个快速、小巧、功能丰富的JavaScript库。它...
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
这个项目是基于Java后端技术和jQuery前端库实现的，提供了用户友好的图片上传体验。以下是对这个项目的一些关键知识点的详细解释： 1. **jQuery**: jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、...
6. 删除图片：在预览图片的右上角添加一个可点击的红叉图标，通常使用CSS定位实现。点击事件处理可以通过jQuery的`.click()`方法来实现，删除图片时清空对应的`<img>`标签或者从数组中移除对应的File对象。 7. ...
这个功能在许多网站中都很常见，比如在线图像编辑工具或上传照片的应用。以下将详细讲解如何使用jQuery来实现这一功能。 首先，我们需要在HTML中设置一个input元素用于用户选择文件，以及一个div或img元素用于展示...
7. **蓝imp jQuery 文件上传插件**：`blueimp-jQuery-File-Upload`是jQuery的一个知名插件，提供了一套完整的文件上传解决方案，包括多文件选择、预览、进度条、错误处理等功能。在项目中使用这个插件，可以大大简化...
前段时间遇到一个问题，前端想实现图片上传预览（不经过后端PHP或JAVA处理），用户点击file按钮上传文件，点击确定马上就能看到...名称:图片上传本地预览插件 v1.1 介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏
这个“jQuery实现的对上传图片进行裁剪插件”就是为了满足这样的需求而设计的。下面将详细阐述这个插件的工作原理、功能特性以及使用方法。 首先，该插件基于JavaScript库jQuery构建，它允许开发者在客户端（用户的...