網站中的上傳/查看圖片不起作用
[英]Uploading/viewing image in website not working
問題描述
我正在創建一個網頁，用戶可以在其中上傳圖像並將其立即顯示在圖像容器中。 當我在自己的計算機中離線運行文件時，它運行良好，但是當我將其上傳到服務器時，它卻沒有運行。
在此網頁中，當用戶單擊圖像時，可以打開“選擇文件”對話框，用戶可以從中選擇圖像。 選擇圖像后，圖像將顯示在圖像容器中。
當我在計算機上執行此操作時，它會顯示對話框，選擇圖像時，它還會將圖像加載到圖像容器中，但是當我使用000webhost服務器運行此網頁時，它甚至都不會顯示選擇內容。文件對話框。
碼：
$("#blah").click(function(e) { $("#fileToUpload").click(); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#blah') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } }
@import url('http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css'); #blah { border-radius: 50%; } #fileToUpload { background-color: cyan; display: none; } .border { margin: 10%; border: 2px solid black; text-align: center; padding-top: 10px; padding-bottom: 30px; background: #eee; border-radius: 10px; }
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <body bgcolor=white> <div class="border"> <img id="blah" src="profile-img.png"> <input name="fileToUpload" id="fileToUpload" type="file" placeholder="Photo" onchange="readURL(this);" /> </div> <script> </script> </body>
2 個解決方案
解決方案1
0 2018-07-19 05:32:01
在腳本加載中使用https協議，如下所示： https : //ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
這應該可以解決問題。
解決方案2
0 已采納 2018-07-19 05:46:22
由於CORS，資源未加載jquery。 您應該改用以下內容：
$("#blah").click(function(e) { $("#fileToUpload").click(); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#blah') .attr('src', e.target.result) .width(150) .height(200); }; reader.readAsDataURL(input.files[0]); } }
@import url('https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css'); #blah { border-radius: 50%; } #fileToUpload { background-color: cyan; display: none; } .border { margin: 10%; border: 2px solid black; text-align: center; padding-top: 10px; padding-bottom: 30px; background: #eee; border-radius: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <body bgcolor=white> <div class="border"> <img id="blah" src="profile-img.png"> <input name="fileToUpload" id="fileToUpload" type="file" placeholder="Photo" onchange="readURL(this);" /> </div> <script> </script> </body>
用於網站圖像查看的燈箱，帶有二維導航
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.