<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>jQuery多张图片同时上传组件</title>
<style>
.add_div {
width: 400px;
height: 500px;
border: solid #ccc 1px;
margin-top: 40px;
margin-left: 170px;
padding-left: 20px;
}
.file-list {
height: 125px;
display: none;
list-style-type: none;
}
.file-list img {
max-width: 70px;
vertical-align: middle;
}
.file-list .file-item {
margin-bottom: 10px;
float: left;
margin-left: 20px;
}
.file-list .file-item .file-del {
display: block;
margin-left: 20px;
margin-top: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="add_div">
<p>
<span>名称：</span>
<input type="text" name="" id="name" value="">
</p>
<p>
<span>图片：</span>
<input type="file" name="" id="choose-file" multiple="multiple">
</p>
<p>
<ul class="file-list ">
</ul>
</p>
<button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload">上传</button>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
$(function () {
////////////////////////////////////////////////图片上传//////////////////////////////////////////////
//声明变量
var $button = $('#upload'),
//选择文件按钮
$file = $("#choose-file"),
//回显的列表
$list = $('.file-list'),
//选择要上传的所有文件
fileList = [];
//当前选择上传的文件
var curFile;
// 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
// 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
$file.on('change', function (e) {
//上传过图片后再次上传时限值数量
var numold = $('li').length;
if(numold >= 6){
layer.alert('最多上传6张图片');
return;
}
//限制单次批量上传的数量
var num = e.target.files.length;
var numall = numold + num;
if(num >6 ){
layer.alert('最多上传6张图片');
return;
}else if(numall > 6){
layer.alert('最多上传6张图片');
return;
}
//原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
curFile = this.files;
//将FileList对象变成数组
fileList = fileList.concat(Array.from(curFile));
for (var i = 0, len = curFile.length; i < len; i++) {
reviewFile(curFile[i])
}
$('.file-list').fadeIn(2500);
})
function reviewFile(file) {
//实例化fileReader,FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件
var fd = new FileReader();
//获取当前选择文件的类型
var fileType = file.type;
//使用FileReader对象的readAsDataURL方法来读取图像文件
//调它的readAsDataURL并把原生File对象传给它，
fd.readAsDataURL(file);//base64：是网络上最常见的用于传输8Bit字节码的编码方式之一
//监听它的onload事件，load完读取的结果就在它的result属性里了
fd.onload = function () {
if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
$list.append('<li style="border:solid red px; margin:5px 5px;" class="file-item"><img src="' + this.result + '" alt="" height="70"><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
} else {
$list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><span class="file-del">删除</span></li>')
}
}
}
//点击删除按钮事件：
$(".file-list").on('click', '.file-del', function () {
let $parent = $(this).parent();
console.log($parent);
let index = $parent.index();
fileList.splice(index, 1);
$parent.fadeOut(850, function () {
$parent.remove()
});
//$parent.remove()
});
//点击上传按钮事件：
$button.on('click', function () {
layer.alert("请添加上传的代码");
})
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>
jQuery的部分学习案例
需积分: 5 189 浏览量
2022-06-23
11:45:11
上传
评论
收藏 2.53MB RAR 举报
jQuery.rar （79个子文件） 
jQuery 实训2.制作图片提示效果 images 
022.jpg 69KB 012.jpg 43KB 032.jpg 75KB 041.jpg 17KB 042.jpg 75KB 011.jpg 14KB 031.jpg 19KB 021.jpg 19KB
Thumbs.db 51KB js jquery-1.12.4.js 297KB
图片提示效果.html 2KB 实训1 使用layer插件实现多张图片同时上传效果 layer skin layer.css 14KB layer.js 19KB index.html 5KB js jquery-1.12.4.js 297KB 实训2.增减购物车商品信息 images 
iphone.gif 2KB add.gif 254B sang.gif 2KB computer.jpg 790B subtraction.gif 231B index.html 2KB js jquery-1.12.4.js 297KB shopping.js 1KB 实训1.图片切换效果 images img5-lg.jpg 64KB img3-lg.jpg 63KB img2-thumb.jpg 5KB img2-lg.jpg 47KB img3-thumb.jpg 6KB img4-lg.jpg 47KB img6-lg.jpg 54KB img6-thumb.jpg 6KB img5-thumb.jpg 5KB Thumbs.db 52KB img4-thumb.jpg 5KB img1-lg.jpg 77KB index.html 2KB js jquery-1.12.4.js 297KB 实训3.使用hover事件实现横向导航菜单 css global.css 3KB 横向导航菜单效果.html 2KB images 
01navbg.png 1KB 01ulhover.jpg 961B 01nav02.png 3KB 01navli.png 260B 01putdown.png 188B Thumbs.db 124KB 01nav01.png 3KB 01nav_putdown.png 166B js base.js 666B jquery-1.12.4.js 297KB 实训1.制作登录框特效 images Thumbs.db 9KB image1.jpg 36KB back.jpg 2KB js jquery-1.12.4.js 297KB 登录框效果.html 2KB 实训3.图片横向轮播效果 css slider.css 1KB basic.css 158B images 2.jpg 190KB 1.jpg 98KB 3.jpg 106KB 5.jpg 246KB 4.jpg 200KB Thumbs.db 93KB index.html 972B js slider.js 614B jquery-1.12.4.js 297KB 实训1.Tab切换效果 css screen.css 1KB index.html 4KB js jquery-1.12.4.js 297KB 实训2 使用Validate插件和supersized插件实现适应手机的表单验证和背景切换效果 css style.css 7KB images 2.jpg 67KB 1.jpg 59KB 3.jpg 68KB index.html 1KB js jquery.validate.min.js 21KB jquery-1.12.4.js 297KB supersized-init.js 2KB common.js 3KB supersized.3.2.7.min.js 18KB register.html 2KB
评论0