多图上传都遇到过得事情,一开始我还用底层支持多图的方式,咋咋的。直到看到公司同事写的多图上传,觉得可以借鉴,分享也为了以后使用。直接代码
(单图多图都支持的)
必须要有1.8.3.min.js 还有需要 必须 layer.js
代码上
HTML
//多图上传 主要是三个 第一个是id priview_sq_img1 for="sq_img1" 对应层级遍历到什么html中
//第二个是 srcChanged('author_img', 'sq_img1') author_img 对应数据库字段 sq_img1对应层级
//第三个是input 里边的参数 multiple是否多图上传标识 data-maxnum最大上传数量
<div class="flexL" id="preview_sq_img1">
<{if $jxsInfo.author_img && $jxsInfo.author_img != ''}>
<{foreach from=$jxsInfo.author_img key=key item=item}>
<div class="Uploadimgs flexL">
<img src="<{$item}>" onclick="picview(this)" class="mr-15"/>
<i style="background-color: #333;" onclick="removeImg(this, 'author_img')">✕</i>
</div>
<{/foreach}>
<{/if}>
</div>
<label for="sq_img1" class="uploadimgcom">
<input id="" type="file" name="">
<span>上传图片</span>
<input id="sq_img1" onchange="srcChanged('author_img', 'sq_img1');" data-maxnum="10" type="file" multiple="multiple" style="display: none;">
</label>
//单图上传 同上注意点
<div class="flexL">
<div class="flexL" id="preview_bb_img">
<{if $jxsInfo.jxs_banner_img && $jxsInfo.jxs_banner_img != ''}>
<div class="Uploadimgs flexL">
<img src="<{$jxsInfo.jxs_banner_img}>" onclick="picview(this)" class="mr-15"/>
<i style="background-color: #333;" onclick="removeImg(this, 'jxs_banner_img')">✕</i>
</div>
<{/if}>
</div>
<label for="bb_img" class="uploadimgcom">
<input id="" type="file" name="">
<span>banner图上传</span>
<input id="bb_img" onchange="srcChanged('jxs_banner_img', 'bb_img');" type="file" style="display: none;">
</label>
</div>
</div>
//需要有个input 隐藏域 存数据 id都和上边的对应
<input type="hidden" id="head_img" name="head_img" value="<{$jxsInfo.head_img}>">
<input type="hidden" id="license_img" name="license_img" value="<{$jxsInfo.license_img}>">
<input type="hidden" id="author_img" name="author_img" value="<{implode(',',$jxsInfo.author_img)}>">
**JQ 有三个 picview放大操作 removeImg多张图删除 srcChanged上传图片 **
//移除图片 fileId 移除删层 父级 和本级 以及对应字段的数据
function removeImg(r, fileId) {
var picsrc = $(r).prev('img').attr('src');
var ptObj = $("#" + fileId).val().split(',');
var idx = $.inArray(picsrc, ptObj);
if(confirm("确定删除当前图片")){
if (idx != -1) {
ptObj.splice(idx, 1);
$("#" + fileId).val(ptObj.join());
$(r).prev('img').remove();
$(r).parent().remove();
} else {
layer.alert('删除图片失败');
}
}
}
//图片放大
function picview(Obj) {
var img_url = $(Obj).attr('src');
var img = new Image();
img.src = img_url;
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: [img.width + 'px', img.height + 'px'], //宽高
shadeClose: true,
content: "<img src=" + img_url + " />"
});
}
//上传图片
function srcChanged(fileId, previewId) {
var files = $('#' + previewId)[0].files;
var maxNum = $('#' + previewId).data('maxnum'); //最多上传5张图片
var picnum = $('#preview_' + previewId).children('img').length;
var fileCount = files.length;
if (fileCount + picnum >= maxNum + 1) {
alert("最多只能上传"+maxNum+"图片");
return false;
} else {
var formData = new FormData();
for (var i = 0; i < fileCount; i++) {
formData.append("fileupload[]", files[i]); // 文件对象 ,fileupload必须加中括号
}
//也可以根据fileId 的不同拓展不同的大小 或者宽高 以及 格式(jpg/png/bmp)
formData.append("thumb", '1');
formData.append("thumb_width", '60');
formData.append("thumb_height", '60');
//需要存放的路径 开头 /static/uploads/content/jxs_author/日期-今日/图片集
//根据需求自己改
formData.append("pictype", 'jxs_author');
}
layer.load(2);
$.ajax({
//php代码在下
url: '/uploadFile/upImage/',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: 'json'
}).done(function (res) {
layer.closeAll('loading');
if (res.resultId == 0) {
var picurl = res.Data;
//多图处理
if ($("#" + previewId).prop('multiple')) {
var html = '';
var valObj = [];
if ($("#" + fileId).val() !== '') {
valObj = $("#" + fileId).val().split(",");
}
$.each(picurl, function (key, val) {
html += ' <div class="Uploadimgs flexL"><img src="' + val + '" onclick="picview(this)" class="mr-15"/>';
html += " <i style=\"background-color: #333;\" onclick=\"removeImg(this,'" + fileId + "')\">✕</i></div>";
valObj.push(val);
});
$('#preview_' + previewId).append(html);
$("#" + fileId).val(valObj.join());
} else {
//单图操作
var html = '';
html += ' <div class="Uploadimgs flexL"><img src="' + picurl[0] + '" onclick="picview(this)" class="mr-15"/>';
html += " <i style=\"background-color: #333;\" onclick=\"removeImg(this,'" + fileId + "')\">✕</i></div>";
$('#preview_' + previewId).html(html);
$("#" + fileId).val(picurl[0]);
}
} else {
layer.alert(res.Data);
}
}).fail(function (res) {
layer.closeAll('loading');
layer.alert('出错了!');
});
}
PHP
我整理一下 只是针对这次 多图单图上传
private $upconfig = [
'allowSuffix'=> ["jpg","jpeg", "png", "pjpeg","gif","bmp","x-png","csv",'xlsx','xls','pdf'],
'rootPath'=> "./static/uploads/",
'savePath'=> "content/",
'maxSize'=> 2097152, //2M 2 * 1024 * 1024;
'maxHeight'=> 300,
'maxWidth'=>450
];
public function upImageAction(){
if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
$photoimg = $_FILES['photoimg'];
$photoimg1 = $_FILES['photoimg1'];
$import_data = $_FILES['import_data'];
$className = "preview";
if ((isset($photoimg['name']) && !empty($photoimg['name']))) {
$className = "preview";
} else {
$photoimg = $photoimg1;
$className = "preview1";
}
//jq代码中的 jxs_author
if(isset($_POST['pictype']) && !empty($_POST['pictype'])){
$this->upconfig['savePath'] = 'content/'.$_POST['pictype'].'/';
}
//上方 $this->upconfig
$up_ins = Comm_Uploadimg::getInstance($this->upconfig);
$res = $up_ins->uploadFile();
if($res){
if(in_array($action,$no_compress_action)){
//$info = substr($this->upconfig['rootPath'], 1) . $res['savepath'] . $res['savename'];
//echo '<img style="padding-right: 5px;" src="' . $info . '" class="' . $className . '">';
//exit;
$img_ins = Comm_Image::getInstance();
foreach($res as $file){
$imgpath = $this->upconfig['rootPath'] . $file['savepath'] . $file['savename'];
if(in_array($file['ext'],$img_ins->compress_type)){
$img_ins->open($imgpath)->compress(950,650)->save($imgpath);//压缩处理;
}
$info[] = substr($imgpath, 1);
}
$response = Comm_Tools::returnMsg(0,$info,1);
}
}else{
$response = Comm_Tools::returnMsg(1,$up_ins->getError(),1);
}
exit($response);
}
}