這篇文章帶給大家的內容是關於php協成實現的詳解（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
hello，大家好，遊戲開始了，歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最後發源碼連結。
廢話不多說，先上圖。
待上傳圖片
#點擊藍色方塊內，pc可以選擇文件，行動裝置選擇拍照或選擇圖片進行上傳。
HTML部分
<div> <div> <div> <img alt="javascript圖片上傳預覽的實作方法（附原始碼）" > <div>请点击</div> <img alt="javascript圖片上傳預覽的實作方法（附原始碼）" > </div> <div></div> <input> </div> </div>
.default-box這層就是加號圖片
up-img是轉碼後顯示影像的地方。
下面input是選擇圖片的地方。
css
.img-box {
display: flex;
justify-content: center;
align-items: center;
}
.card-box {
width: 7.5rem;
height: 4rem;
border: solid .04rem #23a7fe;
border-radius: 4px;
box-sizing: border-box;
position: relative;
}
.upImg-btn {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.up-img {
width: 5.58rem;
height: 3.12rem;
margin: .2rem .6rem;
position: absolute;
top: .2rem;
left: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: cover
}
.default-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.add-img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -.64rem;
margin-top: -.64rem;
width: 1.28rem;
height: 1.28rem;
}
.default-img {
position: absolute;
padding: 0 1.1rem;
bottom: .68rem;
box-sizing: border-box;
width: 100%;
opacity: .5;
}
.default-title {
position: absolute;
width: 100%;
bottom: .12rem;
text-align: center;
color: #23a7fe;
font-size: .32rem;
}內部就是定位了。
頁面js
document.querySelector("#addImg").addEventListener("change",function () {
changeImg({
id:"addImg", //input的Id 必须
imgBox:'upImg', //显示位置Id 必须
limitType:['jpg','png','jpeg'], //支持的类型 必须
limitSize:819200 //图片超过多大开始进行压缩 可不传
});
});我們監聽input的change時間，然後傳入參數dShowImg64.js程式碼
//id,limitType,limitSize
function changeImg(obj = {}) {
if(!obj.id) return;
if(!obj.limitType)return;
var dom = document.querySelector("#"+obj.imgBox);
var files = document.querySelector("#"+obj.id).files[0];
var reader = new FileReader();
var type = files.type && files.type.split('/')[1]; //文件的类型，判断是否是图片
var size = files.size; //文件的大小，判断图片的大小
if (obj.limitType.indexOf(type) == -1) {
alert('不符合上传要求');
return;
}
//判断是否传入限制大小。压不压缩。
var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0;
if (size <p>先取得各種屬性如類型、大小<br>判斷圖片是否小於限制大小、小於的話直接轉base64，大於的話利用canvas 進行縮小完成壓縮後轉base64 然後將得到的值設為背景圖。然後隱藏add的樣式。 </p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/407/191/539/1540188541275097.png" title="1540188541275097.png" alt="javascript圖片上傳預覽的實作方法（附原始碼）"></span><br>最後的預覽圖片</p><p>git位址：<a href="https://github.com/Zhoujiando...">https://github.com/Zhoujiando...</a><br></p><p>以後會再加入更多的小外掛。最後祝大家身體健康，謝謝。 </p><p class="comments-box-content"></p>#以上是javascript圖片上傳預覽的實作方法（附原始碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
