為什么預覽圖像腳本在 html 代碼中不起作用？（檢查舊答案但不起作用）

Question

我想在網頁中上傳和預覽圖像。 我使用了很多在線可用的模板/片段，但由於某些原因，它們都沒有預覽圖像（正確添加了 js 文件鏈接並且它正在工作）。 我無法弄清楚為什么 JavaScript 代碼沒有運行來預覽該圖像。 讓我們來看看我從 stackOverFlow 上的另一個答案中得到的。 它在“運行代碼片段”上運行良好。 但是當我復制代碼並使用它時不起作用。

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

 .previewimg { background: #ffff33; width: 500px; height: auto; padding: 20px; border-radius: 20px; display: none; } .previewimg img { width: 100%; height: auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="form1" runat="server"> <input type='file' id="uploadImg" /> </form> <div class="previewimg"> <img id="preview" src="#" alt="your image" /> </div>

我還使用了許多其他片段，圖像正在上傳但預覽不起作用。

Answer 1

因為我是新手，所以我不知道加載腳本的順序。 我有這個在頭標簽。

<link rel="stylesheet" href="this.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我試圖在加載它之前使用 jQuery 生成$is not defined錯誤。 只是改變了順序，它起作用了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="this.css">

感謝大衛