TP5 picture file ajax upload summary

tp5 image file upload

Select the picture, display the picture, and store it;
html part

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <title>上传图片</title>
</head>
    <body>
	<h2>tp5图片上传</h2>
		<form id="form">
			<input type="file" id="image" name="image" onchange="picture(this);" />
			<img class="img">
		</form>
    </body>
	<script type="text/javascript">
		 function picture() {
     
     
			var datas = new FormData($('#form')[0]);
				console.log(datas);
				$.ajax({
     
     
					url:"/index/index/img",
					type:'POST',
					data:datas,
					dataType:'json',
					cache:false,
					processData:false,
					contentType:false,
					success: function(data) {
     
     
						console.log(data);
						$('.img').attr("src",""+data+"");
					},
				});
	}
    </script>
</html>
public function img()
	{
    
    	
		$file = request()->file('image');//获取图片
		$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');//图片存储
		if($info){
    
    
           $a= $info->getSaveName(); 
		   $b='/uploads/'.$a;
		   return $b;
		}
	}

A simple small function to upload pictures, but I did not write data storage.
Please enlighten me a lot! ! ! !

Guess you like

Origin blog.csdn.net/Kenneth_JC/article/details/114837341