html图片上传包含后端上传接口(php)

最新推荐文章于 2024-06-19 01:44:08 发布

生命无须向死而生

最新推荐文章于 2024-06-19 01:44:08 发布

阅读量1.9k

点赞数 1

分类专栏： html+css+js 前端文章标签： html上传 js图片上传 php上传图片上传文件上传

本文链接：https://blog.csdn.net/zlxls/article/details/103412921

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html+css+js

10 篇文章 0 订阅

订阅专栏

这几天跟改个页面，用到图片单个上传和多个上传，主要用在手机端h5页面，这里特别记录一下
如需下载，可以移步我的资源中去下载
html


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>文件上传</title>
	<link rel="stylesheet" type="text/css" href='css/upload.css'>
    <script src="js/upload.js" type="text/javascript"></script>
</head>
<body class="bg_bd">
	<div class="body_div">
		<form action="" method="post">
		<div id="rsm_create" class="wuly_post">
			<ul class="ulwrap">
				<li>
					<div class="rc_th">
						<span>缩略图(上传一张)</span>
					</div>
				</li>
				<li>
					<div class="rc_td">
							<div class="z_container">
							<!--    照片添加    -->
							<div class="z_photo">
								<div class="z_file">
									<input type="file" id="file" accept="image/*" multiple onchange="imgChange('member/login/upload');" />
									<input type="hidden" name="image" id="txtUserImage" value="/Upload/image/201912/05/20191205204151778.png"/>
								</div>
								<!--
									<div class="z_addImg"  style="display:none;" onclick="imgRemove();" >
									这里需要根据自己的逻辑，盘点如果图片存在那么不添加style="display:none;" 样式，否则需要添加style="display:none;" 样式
								-->
								<div class="z_addImg"  style="display:none;" onclick="imgRemove();">
									<img id="imageShow" src="/Upload/image/201912/05/20191205204151778.png">
								</div>
							</div>
							<!--遮罩层-->
							<div class="z_mask">
								<!--弹出框-->
								<div class="z_alert">
									<p>确定要删除这张图片吗？</p>
									<p>
										<span class="z_cancel">取消</span>
										<span class="z_sure">确定</span>
									</p>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<div class="rc_th">
						<span>轮播图(上传多张)</span>
					</div>
				</li>
				<li>
					<div class="rc_td">
						<div class="z_container">
							<!--    照片添加    -->
							<div class="z_photo z_photo_some">
								<div class="z_file z_file_some">
									<input type="file" id="files" accept="image/*" multiple onchange="imgChangeSome('member/login/upload');" />
									<input type="hidden" name="images" id="txtUserImages" value="/Upload/image/201912/05/20191205204151778.png，/Upload/image/201912/05/20191205204151442.png，/Upload/image/201912/05/20191205204151543.png，/Upload/image/201912/05/20191205204152915.jpg"/>
								</div>
							</div>
							<!--遮罩层-->
							<div class="z_mask">
								<!--弹出框-->
								<div class="z_alert">
									<p>确定要删除这张图片吗？</p>
									<p>
										<span class="z_cancel">取消</span>
										<span class="z_sure">确定</span>
									</p>
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
				<div class="sav_btn">
					<input type="submit"  class="regButtonBtn" value="保存">
				</div>
			</div>
		</form>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		//如果是修改功能需要，初始化已有的图片
		//由于特殊原因，这里图片路径之间的逗号使用“，”中文状态的逗号，请注意
		var imagesStr = '/Upload/image/201912/05/20191205204151778.png，/Upload/image/201912/05/20191205204151442.png，/Upload/image/201912/05/20191205204151543.png，/Upload/image/201912/05/20191205204152915.jpg';
		imgAppend(imagesStr);
	});
</script>
</html>

css

.z_container {
            width: 100%;
            height: 100%;
            overflow: auto;
            clear: both;
        }
        
        .z_photo {
            /*width: 5rem;
            height: 5rem;
            padding: 0.3rem;
            margin: 1rem auto;
            border: 1px solid #555;*/
            overflow: auto;
            clear: both;
            
        }
        
        .z_photo img {
            width: 1rem;
            height: 1rem;
        }
        
        .z_addImg {
            float: left;
            margin-right: 0.2rem;
        }
        
        .z_file {
            width: 1rem;
            height: 1rem;
            background: url(/Public/member/images/z_add.png) no-repeat;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.2rem;
        }
        
        .z_file input::-webkit-file-upload-button {
            width: 1rem;
            height: 1rem;
            border: none;
            position: absolute;
            outline: 0;
            opacity: 0;
        }
        
        .z_file input#file {
            display: block;
            width: auto;
            border: 0;
            vertical-align: middle;
        }
        /*遮罩层*/
        
        .z_mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: none;
        }
        
        .z_alert {
            width: 3rem;
            height: 2rem;
            border-radius: .2rem;
            background: #fff;
            font-size: .24rem;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -1.5rem;
            margin-top: -2rem;
        }
        
        .z_alert p:nth-child(1) {
            line-height: 1.5rem;
        }
        
        .z_alert p:nth-child(2) span {
            display: inline-block;
            width: 49%;
            height: .5rem;
            line-height: .5rem;
            float: left;
            border-top: 1px solid #ddd;
        }
        
        .z_cancel {
            border-right: 1px solid #ddd;
        }

/**jquery版本无限制，就是使用到其最基础的功能*/
//px转换为rem
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 640) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
	/**上传单张图片按钮*/
    function imgChange(url) {
        var obj1 = 'z_photo';
        var obj2 = 'z_file';
        var file = document.getElementById("file");
        console.info(url);
        var formData = new FormData();
        formData.append('file',file.files[0]);
        $.ajax({
            url: url,
            type: 'post',
            data: formData,
            dataType: "json",
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data){
                console.info(data);
                if(data.status===0){
                    $("#imageShow").attr("src",data.message);
                    $("#txtUserImage").val(data.message);
                    $(".z_addImg").css("display",'block');
                }else{
                    alert(data.message);
                }
            },
            error: function(request) {
                alert("网络错误，请重试！");
            },
        });
    };
	/**上传单张图片按钮初始化删除功能*/
    function imgRemove() {
        $(".z_mask").css("display",'block');
        $(".z_cancel").click(function() {
            $(".z_mask").css("display",'none');
        });
        $(".z_sure").click(function() {
            $(".z_mask").css("display",'none');
            $("#imageShow").attr("src","");
            $("#txtUserImage").val("");
            $(".z_addImg").css("display",'none');
        });
    };
	/**如果是修改功能，需要初始化已经存在的图片，在index.html中调用*/
    function imgAppend(imagesStr){
        if(imagesStr){
            var obj1 = 'z_photo_some';
            var images = imagesStr.split("，");
            console.info(images);
            var imgContainer = document.getElementsByClassName(obj1)[0];
            for (var i = 0; i < images.length; i++) {
                var imgUrl = images[i];
                var img = document.createElement("img");
                img.setAttribute("src", imgUrl);
                var imgAdd = document.createElement("div");
                imgAdd.setAttribute("class", "z_addImg");
                imgAdd.appendChild(img);
                imgContainer.appendChild(imgAdd);
            }
            imgRemoveSome();
        }
    }
	/**上传多张图片按钮*/
    function imgChangeSome(url) {
        var obj1 = 'z_photo_some';
        var obj2 = 'z_file_some';
        //获取点击的文本框
        var file = document.getElementById("files");
        //存放图片的父级元素
        var imgContainer = document.getElementsByClassName(obj1)[0];
        //获取的图片文件
        var fileList = file.files;
        //文本框的父级元素
        var input = document.getElementsByClassName(obj2)[0];
        var imgArr = [];
        //遍历获取到得图片文件
        for (var i = 0; i < fileList.length; i++) {
            console.info(i);
            console.info(imgArr);
            var formData = new FormData();
            formData.append('file',file.files[i]);
            $.ajax({
                url:url,
                type: 'post',
                data: formData,
                dataType: "json",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    console.info(data);
                    if(data.status===0){
                        var imgUrl = data.message;
                        imgArr.push(imgUrl);
                        var img = document.createElement("img");
                        img.setAttribute("src", imgUrl);
                        var imgAdd = document.createElement("div");
                        imgAdd.setAttribute("class", "z_addImg");
                        imgAdd.appendChild(img);
                        imgContainer.appendChild(imgAdd);
                    }
                }
            });
        };
        imgRemoveSome();
    };
	/**上传多张图片按钮初始化删除功能*/
    function imgRemoveSome() {
        var obj1 = 'z_photo_some';
        var imgList = $("."+obj1+" .z_addImg");
        var images = "";
        $("."+obj1+" .z_addImg img").each(function(){
            images += $(this).attr("src") + "，";
        });
        images = images.substring(0,images.length-1);
        $("#txtUserImages").val(images);
        console.info(images);
        var mask = document.getElementsByClassName("z_mask")[0];
        var cancel = document.getElementsByClassName("z_cancel")[0];
        var sure = document.getElementsByClassName("z_sure")[0];
        for (var j = 0; j < imgList.length; j++) {
            imgList[j].index = j;
            imgList[j].onclick = function() {
                var t = this;
                mask.style.display = "block";
                cancel.onclick = function() {
                    mask.style.display = "none";
                };
                sure.onclick = function() {
                    mask.style.display = "none";
                    t.style.display = "none";
                    $(t).removeClass("z_addImg");
                    images = "";
                    $("."+obj1+" .z_addImg img").each(function(){
                        images += $(this).attr("src") + "，";
                    });
                    images = images.substring(0,images.length-1);
                    $("#txtUserImages").val(images);
                    console.info(images);
                };
            }
        };
    };

php上传接口

    public function upload() {
        header("content-type:text/html;charset=utf-8");
		//设置时区
		//获取文件名
		$filename = $_FILES['file']['name'];
		//获取文件临时路径
		$temp_name = $_FILES['file']['tmp_name'];
		//获取大小
		$size = $_FILES['file']['size'];
		//获取文件上传码，0代表文件上传成功
		$error = $_FILES['file']['error'];
		//判断文件大小是否超过设置的最大上传限制
		if ($size > 2*1024*1024){
		//		echo "<script>alert('文件大小超过2M大小');window.history.go(-1);</script>";
		//		exit();
		}
		//phpinfo函数会以数组的形式返回关于文件路径的信息 
		//[dirname]:目录路径[basename]:文件名[extension]:文件后缀名[filename]:不包含后缀的文件名
		$arr = pathinfo($filename);
		//获取文件的后缀名
		$ext_suffix = $arr['extension'];
		//设置允许上传文件的后缀
		$allow_suffix = array('jpg','gif','jpeg','png');
		//判断上传的文件是否在允许的范围内（后缀）==>白名单判断
		if(!in_array($ext_suffix, $allow_suffix)){
				//window.history.go(-1)表示返回上一页并刷新页面
				exit(json_encode(['status'=>1,"message"=>"图片格式不正确"]));
		}
		//检测存放上传文件的路径是否存在，如果不存在则新建目录
			$path = "Upload/image/".date('Ym',time())."/".date('d',time())."/";
		if (!file_exists($path)){
			mkdir($path,0777,true);
		}
		//为上传的文件新起一个名字，保证更加安全
		$path .= date('YmdHis',time()).rand(100,1000).'.'.$ext_suffix;
		//将文件从临时路径移动到磁盘
		if (move_uploaded_file($temp_name,$path)){
			exit(json_encode(['status'=>0,"message"=>"/".$path]));
		}else{
			exit(json_encode(['status'=>1,"message"=>"上传失败，请重试"]));
		}
    }

生命无须向死而生

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html图片上传包含后端上传接口(php)

html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"/> <title>文件上传</title> <link rel="stylesheet" type="text/css" href='css/upload.css...
复制链接

扫一扫