jquery 多图片预览
直接拷贝到记事本另存为html就可以调试(Jquery是在线引用的)。
以下代码在IE8和FF下测试通过。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//全局变量
var FileCount=0;//上传文件总数
//添加上传文件按钮
function addFile(obj)
{
var filePath=$(obj).prev().val();
var FireFoxFileName="";
//FireFox文件的路径需要特殊处理
if(window.navigator.userAgent.indexOf("Firefox")!=-1)
{
FireFoxFileName=filePath;
filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
}
if(!checkFile(filePath,FireFoxFileName))
{
$(obj).prev().val("");
return;
}
if(filePath.length==0)
{
alert("请选择上传文件");
return false;
}
FileCount++;
//添加上传按钮
var html='<span>';
html+='<input id="f'+FileCount+'" name="'+FileCount+'" type="file"/> ';
html+='<input type="button" value="添加" onclick="addFile(this)"/>';
html+='</span>';
$("#fil").append(html);
//添加图片预览
html='<li>';
html+='<img id="img'+(FileCount-1)+'" src="'+filePath+'" width="100" height="100" style="cursor:pointer;" alt="暂无预览" />';
html+='<br/>';
html+='<a href="#" name="img'+(FileCount-1)+'" onclick="DelImg(this)">删除</a>';
html+='</li>';
$("#ImgList").append(html);
}
//删除上传文件（file以及img）
function DelImg(obj)
{
var ID=$(obj).attr("name");
ID=ID.substr(3,ID.length-3);
$("#f"+ID).parent().remove();
$(obj).parent().remove();
return false;
}
//检查上传文件是否重复,以及扩展名是否符合要求
function checkFile(fileName,FireFoxFileName)
{
var flag=true;
$("#ImgList").find(":img").each(function(){
if(fileName==$(this).attr("src"))
{
flag=false;
if(FireFoxFileName!='')
{
alert('上传文件中已经存在\''+FireFoxFileName+'\'!');
}
else
{
alert('上传文件中已经存在\''+fileName+'\'!');
}
return;
}
});
//文件类型判断
var str="jpg|jpeg|bmp|gif";
var fileExtName=fileName.substring(fileName.indexOf(".")+1);//获取上传文件扩展名
if(FireFoxFileName!='')//fireFox单独处理
{
fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);
}
//alert(fileExtName);
if(str.indexOf(fileExtName.toLowerCase())==-1)
{
alert("只允许上传格式为jpg，jpeg，bmp，gif的文件。");
flag=false;
}
return flag;
}
</script>
<style type="text/css">
.fil
{
width:300px;
}
.fieldset_img
{
border:1px solid blue;
width:550px;
height:180px;
text-align:left;
}
.fieldset_img img
{
border:1px solid #ccc;
padding:2px;
margin-left:5px;
}
#ImgList li
{
text-align:center;
list-style:none;
display:block;
float:left;
margin-left:5px;
}
</style>
</head>
<body>
<p>上传预览图片:<br>
<div id="fil" class="fil">
<span>
<input id="f0" name="f0" type="file"/>
<input type="button" value="添加" onclick="addFile(this)"/>
</span>
</div>
</p>
<div id="ok">
<fieldset class="fieldset_img">
<legend>图片展示</legend>
<ul id="ImgList">
<!--li>
<img id="img1" width="100" height="100" style="cursor:pointer;">
<br/>
<a href="#" name="img1" onclick="DelImg(this)">删除</a>
</li-->
</ul>
</fieldset>
</div>
</body>
</html>
FROM:http://zhidao.baidu.com/question/281192956.html
分享到：
相关推荐
<title>jQuery图片预览 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/imagePreview.js"></script> <div id="preview"></div> ``` 接下来，我们引入jQuery库...
综上所述，jQuery图片预览插件通过简单易用的API，帮助开发者快速实现图片预览功能，无论是单张图片还是多张图片，甚至是从JSON数据中加载，都能提供优秀的用户体验。了解并掌握这些插件的使用，对于提升Web应用的...
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
本文将深入探讨如何使用jQuery实现图片预览功能。 首先，我们需要了解基本的HTML结构。通常，我们会有一个`<input>`元素让用户选择图片，然后通过JavaScript或jQuery来处理选择的文件。HTML代码可能如下： ```html...
而“jQuery的图片预览imagePreview插件”就是基于jQuery的一个实用工具，专用于实现图片预览功能。这个插件在用户鼠标悬停在图片上时，可以提供大图预览效果，极大地提升了用户体验，尤其是在展示商品图片或摄影作品...
**jQuery图片预览插件实例详解** 在网页开发中，图片预览功能是不可或缺的一部分，尤其是在用户上传图片或浏览图片库时。一个优秀的图片预览插件能够提供流畅的用户体验，增强网站的交互性。本篇文章将深入探讨如何...
**jQuery实现的图片预览插件(imgPreview)详解** 在Web开发中，用户在上传或浏览图片时，能够实时预览图片是一项非常重要的功能。jQuery的imgPreview插件提供了一个简单且高效的解决方案，使得开发者可以轻松地在...
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
<title>jQuery图片预览 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> #preview { width: 200px; height: 200px; display: none; /* 初始隐藏 */ } *"> <div id="preview">...
**jQuery imgBox 图片预览插件详解** 在网页开发中，图片预览功能是非常常见且重要的一个交互元素，能够提升用户体验，使用户在不离开当前页面的情况下查看大图。`jQuery imgBox` 插件就是一个这样的工具，它提供了...
在网页开发中，图片预览和浏览功能是一个常见的需求，特别是在用户需要查看多张图片时。这个场景下，"jQuery 图片预览浏览功能"是一个关键的实现方式，它利用了JavaScript库jQuery的强大功能，提供了方便快捷的图片...
基于Jquery实现的图片预览插件，支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览，下载后即可快速使用。
本文将深入探讨“jQuery上传图片预览”这一主题，这在Web开发中是一个常见且实用的功能，特别是在用户需要在提交之前查看上传图片效果的场景。 首先，我们需要了解jQuery中的`<input type="file">`元素。这个HTML...
zoomify.js是一款非常实用的jQuery图片放大预览Lightbox插件。zoomify.js可以在用户点击页面中的小图片时，将该图片的高清版本以Lightbox的方式放大显示在页面的中间，提高用户的体验度。
本文将深入探讨“jQuery上传图片预览插件”，这是一个实用的工具，旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能，尤其在处理图片大小调整和等比例缩放方面表现卓越，同时兼容...
3. **插件使用**：jQuery有多个图片预览插件可供选择，如`Magnific Popup`、`Fancybox`、`Zoomooz`等。这些插件提供了现成的解决方案，只需简单的配置就能实现图片放大预览功能。例如，`Magnific Popup`支持多种类型...
"jquery图片预览插件.zip"正是为了解决这个问题而设计的，它是一个专为H5移动端打造的jQuery插件，允许用户在手机上轻松预览和操作图片。 该插件的核心特性包括： 1. **多图识别切换**：此插件能够识别并处理多个...
本篇将详细探讨"JQUERY 超炫图片预览插件"这一主题，以及如何利用其中的"postcardviewer"插件来创建令人印象深刻的图片预览体验。 一、jQuery 图片预览插件的重要性 1. 提高用户体验：用户无需点击图片就能预览，...
总的来说，"jQuery图片预览与裁剪"是一个全面的解决方案，涵盖了从前端的图片预览、裁剪到后端的图片处理等多个环节。通过良好的兼容性和无刷新上传，它极大地优化了用户在网页上的图片操作体验。开发者可以根据项目...