上傳圖片並使用Javascript顯示

Question

  <!DOCTYPE html>
<html>
<head>
   <title>My webpage!</title>
    <meta charset=utf-8 />                      
    <link rel="stylesheet" href="styles/testcss.css" />
    <script src="jquery-3.3.1.js"></script>
    <script src="./javascript/moment.js"></script>
    <script src="./javascript/testjs.js" ></script>
</head>
<body>
<script>
function getURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#img_output').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#img_input").change(function() {
  getURL(this);
});
</script>

<input type='file' id="img_input" />
<img id="img_output" src="#" alt="Image" />
</body>
</html>

編輯添加代碼。 我只是制作了一個文檔來單獨測試此功能。 我嘗試了其他類似的代碼示例，但是一切都給了我相同的結果。

我正在嘗試使用js/jquery和HTML從我的PC上傳圖像並將其顯示在頁面上。 由於某種原因，我的代碼無法正常工作，但是當我在線搜索示例並從字面上進行復制和粘貼時，仍然無法正常工作。

在這一點上，我不確定在哪里尋找問題所在。 當我運行任何已下載的代碼示例或編寫的代碼時，都不會顯示任何錯誤。

我意識到這不是最大的問題。 我花了一整天的時間來嘗試並覆蓋似乎應該花10分鍾才能完成的工作。 我讀過文檔，看過示例，復制並粘貼了示例，但沒有任何效果。 我單擊瀏覽按鈕，它將打開圖像，選擇圖像后什么也沒有發生。

任何建議將不勝感激。

Answer 1

代碼在哪里？

無論如何，您正在使用J查詢本地文件？ CDN？

如果添加任何其他JS庫，則可能會產生沖突。

Answer 2

沒有任何代碼片段，我們將無助於您的伙伴。 嘗試並理解以下片段。

 function getURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#img_output').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#img_input").change(function() { getURL(this); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='file' id="img_input" /> <img id="img_output" src="#" alt="Image" />

上傳圖片並使用Javascript顯示

問題描述

2 個解決方案

解決方案1
0 2018-06-05 05:38:50

解決方案2
0 2018-06-05 05:53:07

上傳圖片並使用Javascript顯示

問題描述

2 個解決方案

解決方案1 0 2018-06-05 05:38:50

解決方案2 0 2018-06-05 05:53:07

解決方案1
0 2018-06-05 05:38:50

解決方案2
0 2018-06-05 05:53:07