jQuery實作帶有本機預覽功能的圖片上傳

這次帶給大家jQuery實作帶有本機預覽功能的圖片上傳#，jQuery實作帶有本機預覽圖片上傳的注意事項有哪些，下面就是實戰案例，一起來看看。

nbsp;html>


<meta>
<title>jquery上传图片本地预览效果</title>


<script></script>
<input>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a674d62b26e656d36eed5a1ad998e9ef-0.png?x-oss-process=image/resize,p_40" class="lazy" alt="jQuery實作帶有本機預覽功能的圖片上傳" >
<script>
$(&#39;#upload&#39;).change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById(&#39;upload&#39;).files[0]);
  var f = document.getElementById(&#39;upload&#39;).files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById(&#39;preview&#39;).src = src
})
</script>

運行效果：

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue父元件呼叫子元件方法總結

#vue檔案樹元件使用（附程式碼）

#

以上是jQuery實作帶有本機預覽功能的圖片上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！