TP5+bootstrap管理後臺,多張圖片上傳應用
最近項目管理後臺要整改，這過程遇到多張圖片上傳，查了很多資料，都是暈了，後來找到解決方案。以下代碼已測試成功；
1、首先，商品上傳多張圖片，不能和商品其他信息一起表單提交。那麼只能用jQuery來提交，但是jQuery的$.post{}和$.ajax提交不能提交文件（視頻、圖片）。那其中之一的解決方案就是用 jquery.form.js 提交表單。
2、 jquery.form.js的引用、原理、下載，我就不說了。網上很多資料。記得和jQuery.js一起引用。我用到了ajaxSubmit；
3、功能：上傳多張圖片可以刪除，可以圖片交換順序。刪除文件時是刪除源文件，源文件刪除前要判斷是否存在，還有屏蔽錯誤，以免導致程序報錯，無法運行；
案例如下：HTML代碼：
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">圖集</label>
<div class="col-sm-9 upload_imgs">
<div class="file_input col-sm-5">
<input type="file" name="file[]" multiple="multiple" class="input-img" >
<input type="hidden" value="" name="atlas" class="atlas_id">
</div>
<div class="btn-img-upload">上傳</div>
<div class="imglist">
<ul>
{notempty name="info['imglist']"}
{volist name="$info['imglist']" id="vo"}
<li id="{$vo.id}">
<span class="edit_pic_mask">
<i class="fa fa-arrow-circle-left" onclick="leftShiftImage(this)"></i>
<i class="fa fa-trash" onclick="removeImaged(this)"></i>
<i class="fa fa-arrow-circle-right" onclick="rightShiftImage(this)"></i>
</span>
<img src="{$vo.url}" alt="" width="100%" height="100%">
</li>
{/volist}
{/notempty}
</ul>
</div>
<span class="warning"> * 圖片最大上傳 2M ,圖片格式允許上傳 jpg、png、gif;</span>
</div>
</div>
js代碼:
//點擊上傳圖片
$(".btn-img-upload").click(function(){
var idlist=new Array();
$(".imglist ul li").each(function(){
var idl=$(this).attr('id');
idlist.push(idl);
});
var pagUrl = URL + "Admin/File/uploadImage";
$("#myfromd").ajaxSubmit({
url: pagUrl,
data:{idlist:idlist},
type: 'post',
success: function(data) {
if (data['code'] == 200) {
var htmls='';
for(var i=0;i<data['data'].length;i++){
htmls=htmls+"<li id='"+data['data'][i]['id']+"'><img src='"+data['data'][i]['url']+"' alt='' width='100%' height='100%'>";
htmls=htmls+"<span class='edit_pic_mask'><i class='fa fa-arrow-circle-left' onclick='leftShiftImage(this)'></i><i class='fa fa-trash' onclick='removeImaged(this)'></i><i class='fa fa-arrow-circle-right' onclick='rightShiftImage(this)'></i></span></li>";
}
$('.imglist ul').html(htmls);
$('.imglist').css('display','block');
idLsit();
$(".imglist ul li").mouseover(function(){
var rer=$(this).children('span').css('display','block');
});
$(".imglist ul li").mouseout(function(){
var rer=$(this).children('span').css('display','none');
});
}else{
layer.msg(data['msg'],{
icon: 2,//提示的樣式
time: 2000 //2秒關閉（如果不配置，默認是3秒）//設置後不需要自己寫定時關閉了，單位是毫秒
});
}
},error : function(){
layer.msg('鏈接失敗',{
icon: 2,//提示的樣式
time: 2000 //2秒關閉（如果不配置，默認是3秒）//設置後不需要自己寫定時關閉了，單位是毫秒
});
}
});
});
//獲取
function idLsit(){
var idlist=new Array();
$(".imglist ul li").each(function(){
var idl=$(this).attr('id');
idlist.push(idl);
});
$('.atlas_id').val('');
$('.atlas_id').val(idlist);
if(idlist.length == 0){
$('.imglist').css('display','none');
}else{
$('.imglist').css('display','block');
}
}
//刪除圖片
function removeImaged(e){
var pagUrl = URL + "Admin/File/delImage";
var imgID=$(e).parent().parent().attr('id');
var fromid=$('#fromid').val();
$.post(pagUrl,
{img_id:imgID,fromid:fromid},
function(data,status){
if(data['code'] == 200){
$(e).parent().parent().remove();
idLsit();
}else{
layer.msg('刪除失敗',{
icon: 2,//提示的樣式
time: 2000 //2秒關閉（如果不配置，默認是3秒）//設置後不需要自己寫定時關閉了，單位是毫秒
});
}
});
}
//圖片左移
function leftShiftImage(e){
if($(e).parent().parent().prev()){
$(e).parent().parent().prev().before($(e).parent().parent());
idLsit();
}
}
//圖片右移
function rightShiftImage(e){
if($(e).parent().parent().next()){
$(e).parent().parent().next().after($(e).parent().parent());
idLsit();
}
}
PHP（TP5）：代碼
//多張圖片刪除
public function delImage()
{
$data=input();
$fileId=$data['img_id'];
$fromid=$data['fromid'];
if($fileId && $fromid){
$result=deleteFile($fileId);
if($result){
$cased=db('cased')->field('atlas')->where('id='.$fromid)->find();
if($cased['atlas']){
$arropp=explode(',',$cased['atlas']);
foreach($arropp as $keys => $vals ){
if($vals == $fileId){
unset($arropp[$keys]);
}
}
$filelist=db('cased')->where('id='.$fromid)->update(array('atlas'=>implode(',',$arropp)));
if($filelist){
return array('code'=>200);
}else{
return false;
}
}
}else{
return false;
}
}
}
//多張圖片上傳
public function uploadImage()
{
$data=input();
if($data['idlist']){
$arrData=$data['idlist'];
}else{
$arrData=array();
}
$idList=$this->upload($arrData);
if($idList['code'] == 300){
return array('code'=>300,'msg'=>'請按要求上傳圖片');
}elseif($idList['code'] == 200){
foreach($idList['data'] as $key =>$value){
if($value){
$filelist=db('file')->field('savename,savepath')->where('id='.$value)->find();
$arr['id']=$value;
$arr['url']="/project/Public/Uploads/".$filelist['savepath'].$filelist['savename'];
}
if($arr){
$idData[]=$arr;
$arr=array();
}
}
return array('code'=>200,'data'=>$idData);
}else{
return array('code'=>300,'msg'=>'請上傳圖片');
}
}
/*圖片上傳(多文件)
*$arrData圖片id數組
*/
public function upload($arrData){
$files = request()->file('file');
if($files){
foreach($files as $file) {
$info = $file->validate(['size' => '2097152', 'ext' => 'jpg,png,gif'])->move(DOC_ROOT . '/public/uploads/');//最大2M
if ($info) {
$saveName = $info->getFilename();//圖片
$path = date("Ymd")."/";
$Datalist=array(
'savename'=>$saveName,
'savepath'=>$path,
'ctime'=>time(),
'shop_id'=>session('shopid')
);
db('file')->insert($Datalist);
$file_id=db('file')->getLastInsID();
if($arrData){
array_push($arrData,$file_id);
}else{
$arrData[]=$file_id;
}
}else{
return array('code'=>300);
}
}
return array('code'=>200,'data'=>$arrData);
}else{
return array('code'=>400);
}
}
/*圖片、視頻源文件刪除
*返回true,false
* $id 圖片id
*/
function deleteFile($id){
$fileList=db('file')->field('id,savename,savepath')->where('id='.$id)->find();
if($fileList['id']){
$url=COM_IMG_PATH.$fileList['savepath'].$fileList['savename'];
$fileResult=file_check($url);
if($fileResult){
$detele_file=DOC_ROOT."/Public/Uploads/".$fileList['savepath'].$fileList['savename'];
$result=unlink($detele_file);
if($result){
$list=db('file')->where('id='.$id)->delete();
if($list){
return true;//刪除成功
}else{
return false;
}
}else{
return false;
}
}else{
$list=db('file')->where('id='.$id)->delete();
if($list){
return true;//刪除成功
}else{
return false;
}
}
}else{
return false;
}
}
/*圖片、視頻源文件刪除前判斷是否存在
*返回true,false
* $url 文件路徑 http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/logo-domain-green3.png
*/
function file_check($url){
//屏蔽域名不存在等訪問問題的警告
error_reporting(E_ALL ^ (E_WARNING|E_NOTICE));
$remote_file =$url ;
$header = get_headers($remote_file,true);
return(isset($header[0]) && (strpos($header[0], '200') || strpos($header[0], '304')));
}
記得PHP中有些常量要換成你自己的定義的；有不懂得可以交流；