前端代码
<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];
}