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

html：

<form action="{:Url('do_ls_law_upload')}" method="POST" accept-charset="utf-8" enctype="multipart/form-data">
<li>
　　<span class="leftSpan">封面</span>
　　<span class="img">
　　<img src="" alt="">
　　</span>
　　<div class="lsUpfindBtn">上传图片 <input type="file" name="file" id="file" /> </div>
</li>

</form>

 

js:

<script>
;(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);
});

})()
</script>

 

PHP:

$file = request()->file('file');
$info = $file->move(ROOT_PATH.'/public/uploads/');//图片保存路径
$filesaveName = '/uploads/'.$info->getSaveName(); //储存到数据库
if(!$info){
$this->error('图片上传失败');
}