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('圖片上傳失敗');
}