html

<!-- 上傳按鈕 --> <div class="cut-cert-btn"><div class="cut-cert-btn-content">選擇文件</div><input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp" id="cert_file" /> </div> <!-- 圖片預覽 --> <img src="" id='cert_view' />

js

// 按鈕元素 var file = document.getElementById('cert_file'); // 圖片預覽元素 var image = document.querySelector("cert_view"); // 事件 file.onchange = function() {// 上傳的文件 var fileData = this.files[0]; // 預覽image.src = window.URL.createObjectURL(docObj.files[0]); }

css

.cut-cert-btn {display: inline-block;vertical-align: bottom;position: relative;.cut-cert-btn-content {width: 68px;height: 32px;line-height: 32px;text-align: center;color: #fff;background-color: #409eff;border-color: #409eff;font-size: 12px;border-radius: 4px;font-weight: 500;}input {position: absolute;top: 0;left: 0;width: 68px;height: 32px;opacity: 0;cursor: pointer;} }

相關文章

HTML 標簽
js上傳圖片
js實現本地上傳圖片預覽

總結

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

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