PHP+Ajax实现简单的图片上传到服务器和删除图片(单张)

通过参考PHP中文网的资料和周小黑的博客园写的简易的单图片上传浏览和删除服务器图片

 

1.HTML代码

<!-- 前面要引入jQuery和Bootstrap -->
<form onsubmit="return false">
	<input type="file" name="file" id="upload" onchange="uploads(this)">
</form>
<ul id="imglist" class="row" style="list-style-type:none">

</ul>

<!-- JS代码-->
<script type="text/javascript">
	function uploads(obj) {
		var arrayFile=obj.files[0];
		var formData=new FormData();/*创建FormData对象,用于异步上传文件*/
		var fileMaxSize=1048576 /*1MB大小*/
		var fileSize=arrayFile.size;
		formData.append('file',arrayFile); /*将获取到的file数组信息放入formData,没有放入后台得不到信息*/
		var r=confirm("您确定要上传这张图片吗?");
		if(fileSize>fileMaxSize){
			alert('文件大小不能大于1M!')
		}else{
			if(r==true){
				$.ajax({
					url: '/uploadpicture/upload_file.html',/*自行填写你服务器的指定方法*/
					type: 'POST',
					contentType: false,	//设置为false,因为是构造的FormData对象,所以这里设置为false
					processData: false, //增加这一行，不处理参数
					data:formData,
					dataType:'json',
					success: function(result){
						if(result==1){
							alert('文件容量太大')
						}else if(result==2){
							alert('不支持此文件类型,请重新选择')
						}else{
							alert('上传成功')
							$("#upload").attr('disabled','disabled')
							var li=$('<li class="col-md-6"></li>');
							var button = $('<button type="button" class="close" aria-label="Close" onclick="deleteimg(this)"><span aria-hidden="true">×</span></button>');
							var img = $('<img src="" id="disphoto">');
							img.attr('src',result);
							li.append(button);
							li.append(img);
							$('#imglist').append(li);
						}
					}
				})
			}
		}
	}

	function deleteimg(obj){
		var r=confirm("您确定要删除这张图片吗?");
		var src=$("#disphoto").attr('src');
		var picture=src.slice(54); /*由于知识浅,不知道有什么好一些的截取方法QAQ*/
		var result={};
		result['picture']=picture
		console.log(picture);
		$.post('/uploadpicture/delete_file.html',result,function(data){
			if(data==2){
				alert('删除失败')
			}else{
				if(r==true){
					alert('删除成功')
					$(obj).parent().remove();
					$("#upload").removeAttr('disabled')
				}
			}
		})
	}
</script>

2.PHP代码

<?php
	header("content-type:text/html;charset=utf-8");
	class uploadpicture extends coreControl{
		var $upload_name;
		var $upload_tmp_address;
		var $upload_server_name;
		var $upload_filetype ;
		var $file_type;
		var $file_server_address;
		var $upload_file_size;
		var $upload_must_size= 1048576; //允许上传文件的大小，自己设置
 		function upload_file(){
 			$this->upload_name = $_FILES["file"]["name"]; //取得上传文件名
			$this->upload_filetype = $_FILES["file"]["type"];
			$this->upload_server_name = date('y-m-dh-i-s').$this->upload_name;
 			$this->upload_tmp_address = $_FILES["file"]["tmp_name"]; //取得临时地址
			$this->file_type = array('image/jpg','image/jpeg','image/png','image/gif',); //允许上传文件的类型
 			$this->upload_file_size = $_FILES["file"]["size"]; //上传文件的大小
 			if(in_array($this->upload_filetype,$this->file_type)){
 					if($this->upload_file_size < $this->upload_must_size){
 						$this->file_server_address = "/www/wwwroot/jiangyihao.top/temp/lostinfo/upload_image/".$this->upload_server_name;
 						move_uploaded_file($this->upload_tmp_address,$this->file_server_address);//从temp目录移出
 						$src="https://www.jiangyihao.top/temp/lostinfo/upload_image/".$this->upload_server_name;
 						echo json_encode($src);
 					}else{
						echo 1; //文件容量太大
					}
 			}else{
 				echo 2; //不支持此文件类型，请重新选择
 			}
 		}
 		public function delete_file(){
 			$filepath="/www/wwwroot/jiangyihao.top/temp/lostinfo/upload_image/";
 			$filepicture=$_POST['picture'];
 			var_dump($filepicture);
 			$files=$filepath.$filepicture;
 			var_dump($files);
 			if (unlink($files)){
				echo 1;
			}
			else{
				echo 2;
			}
 		}
	}

3.注意事项

(1)在PHP上传代码中file_server_address要填写自己服务器的地址，上传成功后将存放该文件的路径用json_encode()输出到前端用于预览

(2)在PHP删除代码中，unlink的第一个参数填写的是文件路径(我使用的是宝塔面板)