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('图片上传失败');
}