前端上传封面_图片上传(前端显示预览，后端php接收)

html：

封面

　　

上传图片

js:

;(function(){

var

fileInput = document.querySelector('.lsUpfindBtn input'),

preview = document.querySelector('.ls_UploadDocuments li .img img');

// 监听change事件:

fileInput.addEventListener('change', function () {

preview.src = ""

// 检查文件是否选择:

if (!fileInput.value) {

info.innerHTML = '没有选择文件';

return;

}

// 获取File引用:

var file = fileInput.files[0];

// 获取File信息:

// 读取文件:

var reader = new FileReader();

reader.onload = function(e) {

var data = e.target.result

preview.src = data

};

// 以DataURL的形式读取文件:

reader.readAsDataURL(file);

});

})()

PHP:

$file = request()->file('file');

$info = $file->move(ROOT_PATH.'/public/uploads/');//图片保存路径

$filesaveName = '/uploads/'.$info->getSaveName(); //储存到数据库

if(!$info){

$this->error('图片上传失败');

}