tp5 + ajax 异步上传图片

前端代码

<div class="input-file-box col-sm-3">
	<span>点击上传图片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>

JS代码

#----------------
window.onload=function(){
	var input=document.getElementById("uploadfile");
	var div;
	// 当用户上传时触发事件
	input.onchange=function(){
		readFile(this);
	}
	//处理图片并添加都dom中的函数
	var readFile=function(obj){
		// 获取input里面的文件组
		var fileList=obj.files;
		//对文件组进行遍历，可以到控制台打印出fileList去看看
		for(var i=0;i<fileList.length;i++){
			// 先上传图片，然后加载图片
			var formData = new FormData();
			formData.append('userName','123');
	        formData.append('file',fileList[i]);
			$.ajax({
				type:"post",
				url:"/admin/site/uploadImg",
				data:formData,
				contentType:false,	
				// 不要设置Content-Type请求头，
				// 一开始写contentType:undefined 获取不到数据 false 之后就ok了
	            processData:false, 	// 不要处理发送的数据
				mimeType:"multipart/form-data",
				success:function(ent){
					console.log(ent)
					// 上传成功处理
				},
				error:function(err) {
					// 上传失败
				}
			});
			
		}
	}
}

控制器

$file = request()->file('image');//获取上传图片
// 移动到框架应用根目录/public/uploads/ 目录下
if ($file) {
    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
    // 修改文件保存路径
    // $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'admin' . DS . date('Y') . DS . date('m'),md5(microtime(true)));
    if ($info) {
        $img = $info->getSaveName();//获取名称
        $imgpath = DS.'uploads'.DS.$img;
        $path = str_replace(DS,"/",$imgpath);//数据库存储路径
    } else {
        $status = 0;
        $message = '图片上传失败';
    }
}else{
    $status = 0;
    $message = '图片上传失败';
    return ['status' => $status, 'message' => $message];
}