整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
冬至，希望大家都可以有餃子和湯圓吃，主要是能和自己家人愛人一起吃個飯。
下面進入主題，用原生JS給擼個圖片上傳，預覽的小示例，希望對大家有所幫助。
function fChange() {
let file=document.getElementById('file');
// 輸出已經選擇圖片名字
console.log(file.value);
// 輸出已經選擇的圖片對象
console.log(file.files[0]);
}
...
<input type="file" id="file" onchange="fChange()">
10行JavaScript代碼完成圖片的上傳預覽
我們怎么把圖片對象渲染到頁面了？達到可以預覽的目的？
// file 轉 blob對象
let bold=window.URL.createObjectURL(file.files[0]);
console.log('bold==>'+bold);
let boldImg=document.getElementById('bold');
boldImg.src=bold;
// file 轉 base64
let base64Img=document.getElementById('base64');
var reader=new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload=function (e) {
console.log('base64==>'+this.result);
base64Img.src=this.result;
}
10行JavaScript代碼完成圖片的上傳預覽
10行JavaScript代碼完成圖片的上傳預覽
這樣看blob對象和base64都可以預覽圖片，但是blob對象僅僅是當次緩存，如果刷新，你重新把之前轉的字符串放到src是不可以預覽的，當時base64是可以的。所以存庫的時候不僅可以圖片路徑，還可以直接存base64（base64很占用數據庫空間，文件越大，base64字符串越大）
下面我們對上面示例做優化，可以上傳多張圖片并預覽，美化界面。
10行JavaScript代碼完成圖片的上傳預覽
10行JavaScript代碼完成圖片的上傳預覽
<div id="img-pre"> </div> <div id="add-pic"> <input type="file" id="up-file" onchange="fChange()"> </div>
css樣式
#add-pic{
width: 100px;
height: 100px;
background: url('./add-pic.png')
}
#add-pic input{
width: 100%;
height: 100%;
display: none;
}
#img-pre:after{
display: block;
content: '';
clear: both;
}
#img-pre img{
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
}
javascript
let addPic=document.getElementById('add-pic'), upFile=document.getElementById('up-file');
// 監聽圖片點擊，從而觸發input file的點擊事件
addPic.addEventListener('click', function(){
upFile.click();
})
function fChange() {
let file=document.getElementById('up-file');
let imgPre=document.getElementById('img-pre');
// file 轉 blob對象
let bold=window.URL.createObjectURL(file.files[0]);
// 創建img元素，并添加到img-pre元素里
var img=document.createElement("img");
img.setAttribute("src", bold);
imgPre.appendChild(img);
}
主要是通過css隱藏掉input file選擇文件按鈕，然后用+號圖片點擊事件來觸發input file的點擊事件，達到能選擇圖片的目的。
喜歡小編的點擊關注，了解更多知識！
源碼地址請點擊下方“了解更多”
者：藍色的秋風
轉發鏈接：https://mp.weixin.qq.com/s/cruL9JGZNZQFrMSrzJJWiQ
端頁面：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="./uploadfile.css" rel="stylesheet">
<script src="./jquery.min.js"></script>
<script src="./jquery.uploadfile.min.js"></script>
</head>
<body>
<img class="imgPreview" width="80px" height="80px" style="display: none"/>
<div id="mulitplefileuploader">上傳</div>
<div id="status"></div>
<script>
$(document).ready(function (){
var settings={
url: "upload.php",
dragDrop: true,
fileName: "myfile",
allowedTypes: "jpg,png,gif,doc,pdf,zip",
returnType: "json",
onSuccess: function (files, data, xhr){
$('.imgPreview').show();
$('.imgPreview').attr('src','uploads/'+data);
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
