一、修改原生 input 樣式

html 結構

<div class="card"><input id="upload" type="file" accept=".jpg" /><div class="view"><!-- 上傳成功后 --><div id="imgContainer" class="img-container"><img id="img" /><!-- 鼠標移入展示 查看 與 刪除 操作 --><div class="img-mask"><span id="showImg">查看</span><span id="delImg">刪除</span></div></div><!-- 上傳成功前 --><span id="icon">+</span></div> </div>

css 樣式

.card {position: relative;width: 200px;height: 140px;padding: 5px;margin-right: 20px;border: 1px dashed #d9d9d9;border-radius: 6px;margin: 300px auto; }.card input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;cursor: pointer; }.card .view {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center; }.card .view #icon {display: inline-block;font-size: 30px; }.card .view .img-container {position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none; }.img-container img {width: 100%;height: 100%; }.img-container .img-mask {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;background: rgba(0, 0, 0, .3);transition: all .5s ease;display: flex;justify-content: center;align-items: center; }.img-container:hover .img-mask {opacity: 1; }.img-mask span {color: #fff;margin: 0 10px;cursor: pointer; }

效果展示

二、上傳圖片并展示

監聽 input 的 change 事件，圖片上傳成功后創建 URL

<script>const upload = document.getElementById('upload');const imgContainer = document.getElementById('imgContainer');const img = document.getElementById('img');const icon = document.getElementById('icon');let imgUrl = '';// 圖片上傳成功后創建 URLupload.onchange = function (value) {const fileList = value.target.files;if (fileList.length) {imgContainer.style.display = 'block';icon.style.display = 'none';imgUrl = window.URL.createObjectURL(fileList[0]);img.src = imgUrl;}} <script>

上傳成功后展示

三、實現圖片預覽

寫一個 modal 框

<!-- 預覽圖片的 modal 框 --> <div id="modal"><span id="closeIcon">關閉</span><div class="content"><img id="modalImg"></div> </div>

modal 樣式

/* modal 樣式 */ #modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 0;height: 0;box-shadow: 0 0 10px #d9d9d9;background: rgba(0, 0, 0, .3);/* transition: all .1s ease-in-out; */overflow: hidden; }#modal .content {box-sizing: border-box;width: 100%;height: 100%;padding: 45px 20px 20px;display: flex;justify-content: center; }#modal #modalImg {height: 100%; }#modal #closeIcon {position: absolute;top: 10px;right: 10px;cursor: pointer; }

然后獲取元素, 監聽點擊事件

/* ...接以上代碼 */ const showImg = document.getElementById('showImg'); const delImg = document.getElementById('delImg'); const modal = document.getElementById('modal'); const modalImg = document.getElementById('modalImg'); const closeIcon = document.getElementById('closeIcon');// 點擊預覽圖片 showImg.onclick = function () {modal.style.width = '100%';modal.style.height = '100%';modalImg.src = imgUrl; }// 關閉 modal 框 closeIcon.onclick = function () {modal.style.width = '0';modal.style.height = '0';modalImg.src = ''; }// 刪除上傳的圖片 delImg.onclick = function () {upload.value = '';imgUrl = '';icon.style.display = 'block';imgContainer.style.display = 'none'; }

預覽效果圖

總結

以上是生活随笔為你收集整理的JavaScript — 原生js实现上传图片控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。