最简单的多图上传，放大，删除操作

最新推荐文章于 2025-09-12 13:20:46 发布

原创最新推荐文章于 2025-09-12 13:20:46 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#上传图片 #jquery #ajax #php

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种实现多图上传与预览的技术方案，包括HTML、jQuery和PHP的综合应用。通过代码示例详细解释了如何实现单图与多图上传、图片预览、图片删除及放大查看等功能。

多图上传都遇到过得事情，一开始我还用底层支持多图的方式，咋咋的。直到看到公司同事写的多图上传，觉得可以借鉴，分享也为了以后使用。直接代码
（单图多图都支持的）
必须要有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')">&#10005;</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')">&#10005;</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('div').children('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 + "')\">&#10005;</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 + "')\">&#10005;</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);
	}
}