thinkphp5文件上传

一时失言乱红尘 2022-04-23 04:30 238阅读 0赞

## jq是网上链接的,thinkphp5是控制器里写的，不足之处多多指教 不用submit直接按钮上传 ##

## **话不多说直接上代码** ##

1.静态页面

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<title>图片上传</title>
    		<style>
    			/** 清除内外边距 **/
    			
    			body,
    			h1,
    			h2,
    			h3,
    			h4,
    			h5,
    			h6,
    			hr,
    			p,
    			blockquote,
    			/* structural elements 结构元素 */
    			
    			dl,
    			dt,
    			dd,
    			ul,
    			ol,
    			li,
    			/* list elements 列表元素 */
    			
    			pre,
    			/* text formatting elements 文本格式元素 */
    			
    			form,
    			fieldset,
    			legend,
    			button,
    			input,
    			textarea,
    			/* form elements 表单元素 */
    			
    			th,
    			td
    			/* table elements 表格元素 */
    			
    			{
    				margin: 0;
    				padding: 0;
    			}
    			/** 设置默认字体 **/
    			
    			body,
    			button,
    			input,
    			select,
    			textarea
    			/* for ie */
    			
    			{
    				font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
    			}
    			
    			h1,
    			h2,
    			h3,
    			h4,
    			h5,
    			h6 {
    				font-size: 100%;
    			}
    			
    			address,
    			cite,
    			dfn,
    			em,
    			var {
    				font-style: normal;
    			}
    			/* 将斜体扶正 */
    			
    			code,
    			kbd,
    			pre,
    			samp {
    				font-family: courier new, courier, monospace;
    			}
    			/* 统一等宽字体 */
    			
    			small {
    				font-size: 12px;
    			}
    			/* 小于 12px 的中文很难阅读，让 small 正常化 */
    			/** 重置列表元素 **/
    			
    			ul,
    			ol {
    				list-style: none;
    			}
    			/** 重置文本格式元素 **/
    			
    			a {
    				text-decoration: none;
    			}
    			
    			a:hover {
    				text-decoration: underline;
    			}
    			/** 重置表单元素 **/
    			
    			legend {
    				color: #000;
    			}
    			/* for ie6 */
    			
    			fieldset,
    			img {
    				border: 0;
    			}
    			/* img 搭车：让链接里的 img 无边框 */
    			
    			button,
    			input,
    			select,
    			textarea {
    				font-size: 100%;
    			}
    			/* 使得表单元素在 ie 下能继承字体大小 */
    			/* 注：optgroup 无法扶正 */
    			/** 重置表格元素 **/
    			
    			table {
    				border-collapse: collapse;
    				border-spacing: 0;
    			}
    			/* 清除浮动 */
    		</style>
    		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    
    	</head>
    
    	<body>
    		<style type="text/css">
    			.tyb-upload {
    				width: 100%;
    				height: auto;
    			}
    			
    			.tyb-upload li {
    				width: 150px;
    				height: 150px;
    				float: left;
    				box-sizing: border-box;
    				position: relative;
    			}
    			.tyb-upload li img{
    				width: 100%;
    				height: 100%;
    			}
    			.tyb-upload li:hover{
    				box-shadow: 0px 0px 5px 0px #464444;
    			}
    			.tyb-upload .upload {
    				cursor: pointer;
    			}
    			
    			.tyb-upload .upload div {
    				position: relative;
    				width: 100%;
    				height: 100%;
    				line-height: 150px;
    				font-size: 80px;
    				background: #d0d0d0;
    				color: #fff;
    				overflow: hidden;
    				text-align: center;
    			}
    			.tyb-upload li .butimg{
    				display: none;
    			}
    			.tyb-upload li:hover .butimg{
    				display: block;
    			}
    			.tyb-upload .upload div span {
    				cursor: pointer;
    			}
    			
    			.tyb-upload .upload input {
    				position: absolute;
    				left: 0px;
    				right: 0px;
    				opacity: 0;
    				width: 100%;
    				height: 100%;
    			}
    			.tyb-upload li .butimg{
    				position: absolute;
    				left: 0px;
    				top: 0px;
    				text-align: center;
    				width: 100%;
    				margin-top: 70px;
    			}
    			.tyb-upload li .butimg span{
    				cursor: pointer;
    				margin-right: 5px;
    			}
    		</style>
    
    		<ul class="tyb-upload" id='tyb-upload'>
    			<li class="upload">
    				<div>
    					<span>+</span>
    					<input id="files" type="file" name="file[]" multiple />
    					<input type="hidden" id="files-button"   />
    				</div>
    			</li>
    		</ul>
    		<script type="text/javascript">
    			var imgData = [];
    			$(function() {  
    
    				$("#files-button").on("click",function(){
    					var file = $("#files")[0].files; //获取指定ID的文件信息
    					for(var i = 0; i < file.length; i++) {
    						imfs(file[i])
    					}
    					this.value = '';
    				});
    				$("#files").on("change",function(){
    		            $("#files-button").trigger("click");
    		        })
    				
    			});
    			function imfs(file) {
    				var formData = new FormData(); //创建FormData对象，将所需的信息封装到内部，以键值对的方式
    				formData.append("file", file); //参数封装格式,可以是文件，亦可以是普通的字符串
    				$.ajax({
    					type: "post",
    					url: 'http://localhost:1125/index/upload/uploadFels',
    					type: "post",
    					data: formData,
    					contentType: false,
    					dataType : "json",
    					processData: false,
    					success: function(res) {
    						if(res.status == 200){
    							imgData.push(res.url);
    							var url = "'"+res.url+"'";
    							$('#tyb-upload').prepend('<li >'+
    								'<div class="butimg">'+
    									'<span onclick="lookimg(this)">查看</span>'+
    									'<span onclick="deleteimg(this)">删除</span>'+
    								'</div>'+
    								'<img src="' +res.url+ '" />'+
    								'</li>');
    						}
    						
    					},
    					complete: function(resa) {
    						console.log("提交前");
    					}
    
    				});
    			}
    			//删除方法
    		    function deleteimg(e){
    		    	var p_div = e.parentNode;
    		    	var p_img = $(p_div).next();
    		    	var parentNode = p_div.parentNode;
    		    	var url = p_img[0].src;
    		        $.post("http://localhost:1125/index/upload/delfile",{url:url},function(res){
    		            if(res.status == 200){
    		            	for (var i in imgData) {
    		            		if(imgData[i] == url){
    		            			delete imgData[i];
    		            			parentNode.remove();
    		            		}
    		            	}
    		            	
    		            }
    		        },'json')
    		    }
    		    //查看放大
    		    function lookimg(e){
    		        var p_div = e.parentNode;
    		    	var p_img = $(p_div).next();
    		    	var url = p_img[0].src;
    		        window.open(url,"_blank");
    		    }
    		</script>
    
    	</body>
    
    </html>

2.后台thinkphp

public function uploadFels(){
            $file = request()->file('file');
            if($file){
                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                if($info){
                    $sql = $info->getSaveName();
                    $avator=str_replace('\\','/',$sql);
                    $dk = substr($_SERVER['HTTP_HOST'],-4);
                    $sql =  "http://localhost:".$dk."/uploads/".$avator;
                    echo json_encode(['url'=>$sql,'status'=>200]);
                }else{
                    echo json_encode(['url'=>null,'status'=>400]);
    
                }
            }
        }
    
        public function delfile(){
            $info_del = input('post.url');
            $result = substr($info_del,strripos($info_del,"uploads"));
            if($result){
                $myFile = $result;
                is_file($myFile) && unlink($myFile);
                echo json_encode(['msg'=>'删除成功','status'=>200]);
            }
    
    
        }

3.效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70]  
点击删除  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70]: /images/20220323/aad1616f21934048bc9146bae6c2e969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4NzYxNTkz_size_16_color_FFFFFF_t_70 1]: /images/20220323/cce886e3b536495aa048c65ccdc647b0.png