今天没事去研究了一下多图片同时上传,看了很多案例,也下载了一些插件,感觉都很复杂,就自己想了一个思路,做了个简单的demo,代码贴出来,供大家参考一下。由于我也是小菜鸟,所以代码里有什么问题欢迎大家提出来。
这个多图上传的思路是:先添加一个<input type="file">的文件按钮,设置样式opacity=0;z-index=1;覆盖在一个普通按钮<input type="button">上(新手注意哈,这里z-index要设置pozition才有效,这里要将file按钮覆盖到普通按钮上,本就要设置pozition=absolute绝对定位);在选择图片后,生成预览图,同时添加<input type="file">,设置z-index=2,覆盖到之前的file按钮上,以此类推。
引入文件:
<link rel="stylesheet" type="text/css" href="/public/html/style/bootstrap.min.css">
<script src="/public/html/js/jquery-3.1.0.min.js"></script>
<script src="/public/html/js/bootstrap.min.js"></script>
HTML代码:
<form method="post" enctype="multipart/form-data" action="{:url('index/fileupload/doUpload')}" id="box">
<!--file包裹-->
<div class="addbtn_wrap">
<input type="button" class="btn btn-primary addbtn" value="点击添加图片">
<input type="file" name="image[]" id="file1" style="z-index: 1" οnchange="getPhoto(this)">
</div>
<!--图片包裹-->
<div class="img_wrap">
</div>
<input type="submit" value="开始上传" class=" btn btn-primary ">
</form>
CSS样式:
<style>
/*表单标签*/
#box{
margin:50px auto;
width:600px;
padding-bottom: 10px;
min-height:400px;
background:#FF9;
}
/*点击添加图片按钮div包裹*/
.addbtn_wrap{
position: relative;
}
/*添加图片按钮*/
.addbtn{
position: absolute;
}
input[type=file]{
width: 100px;
position: absolute;
top: 5px;
opacity: 0;
}
/*提交按钮*/
input[type=submit]{
margin: 0 auto;
display: none;
}
/*所有图片div包裹*/
.img_wrap{
width:600px;
margin-top: 40px;
float: left;
margin-bottom: 40px;
}
.pic_wrap{
width: 180px;
height: 160px;
float: left;
position: relative;
margin: 5px;
}
.img{
width: 180px;
height: 160px;
float: left;
}
.delete{
width: 180px;
height: 160px;
position: absolute;
display: none;
border-radius: 6px;
}
.delete img{
float: right;
}
</style>
jquery代码:
<script type="text/javascript">
/*预览*/
var count=1;
function getPhoto(node) {
var imgURL = "";
try{
var file = null;
if(node.files && node.files[0] ){
file = node.files[0];
}else if(node.files && node.files.item(0)) {
file = node.files.item(0);
}
try{
imgURL = file.getAsDataURL();
}catch(e){
imgRUL = window.URL.createObjectURL(file);
}
}catch(e){
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
/*动态添加file和对应的图片预览*/
createPic();
createFile();
count++;
return imgURL;
}
/*创建图片预览元素*/
function createPic() {
var picText='<div class="pic_wrap" id=" showPic'+count+'" οnmοuseοver="overDelete(this)" οnmοuseleave="leaveDelete(this)">'+
'<img src="'+imgRUL+'"" class="img img-rounded">'+
'<div class="delete"><img src="/public/html/images/x_alt.png" οnclick="deletePic(this)"></div>'+
'</div>';
/*遍历除去最新一个file的所有file,如果有file的值与最后一个file的值相等,不插入预览图*/
for(var i=0;i< $('input[type=file]').length-1;i++){
var val= $('input[type=file]').eq(i).val();
if($('input[type=file]').last().val()==val){
/*此处不插入图片,就让count回到之前那一步,否则id=file和id=showPic的数据后缀对不上,导致file和图片对应错乱*/
count=count-1;
return;
}
}
$('.img_wrap').append(picText);
}
/*创建新的file元素*/
function createFile() {
var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" οnchange="getPhoto(this)">';
/*遍历除去最新一个file的所有file,如果有file的值与最后一个file的值相等,提示图片已存在,清空最后一个file*/
for(var i=0;i< $('input[type=file]').length-1;i++){
var val= $('input[type=file]').eq(i).val();
if($('input[type=file]').last().val()==val){
var file = $('input[type=file]').last();
file.after(file.clone().val(""));
file.remove();
alert("图片已存在!");
return;
}
}
$('.addbtn_wrap').append(flieText);
/*图片数量大于1,显示提交按钮,添加一次判断一次*/
if($('.pic_wrap').length<=0){
$('input[type=submit]').css('display','none');
}else {
$('input[type=submit]').css('display','block');
}
}
/*移入移出,删除遮罩层显示隐藏*/
function overDelete(obj) {
$(obj).children('div').show();
}
function leaveDelete(obj) {
$(obj).children('div').hide();
}
/*删除图片和对应的file*/
function deletePic(obj) {
/*提取图片的id的数字部分*/
var picId=$(obj).parent().parent().attr('id');
var picVal= picId.replace(/[^0-9]/ig,"");
var fileArr=$('input[type=file]');
/*遍历file,如果图片id的数字部分和file的id的数字部分相同,那么文件与图片是对应的,删除图片的同时删除对应的file*/
fileArr.each(function () {
/*提取file的id的数字部分*/
var fileId=$(this).attr('id');
var fileVal = fileId.replace(/[^0-9]/ig,"");
if(fileVal==picVal){
$(this).remove();
$(obj).parent().parent().remove();
}
});
/*图片数量大于1,显示提交按钮,删除一次判断一次*/
if($('.pic_wrap').length<=0){
$('input[type=submit]').css('display','none');
}else {
$('input[type=submit]').css('display','block');
}
}
</script>
tp5控制器代码:
public function doUpload(){ $files = request()->file('image'); $info=""; foreach($files as $picFile){ // 移动到框架应用根目录/public/uploads/ 目录下 $info = $picFile->move(ROOT_PATH.'uploads'.DS.'images'); /*获取存储路径,以便插入数据库*/ /* $path= "/uploads/images/".$info->getSaveName();*/ }
if($info!==""){ return $this->success('上传成功!'); // 成功上传后 获取上传信息 // 输出 jpg /* echo $info->getExtension();*/ // 输出 42a79759f284b767dfcb2a0197904287.jpg /*echo $info->getFilename();*/ }else{ // 上传失败获取错误信息 /* echo $file->getError();*/ return $this->error('上传失败!'); }