我想要上傳更多圖片

Question

我按下輸入按鈕以選擇要參與的圖像數量，並且想要查看現代狀態的預覽，但不知道這僅僅是一張圖像。 十個想出來。 救命

在html文件plz下照顧它

 $(function() { $("#fileupload").change(function() { $("#dvPreview").html(""); var regex = /^([a-zA-Z0-9\\s_\\\\.\\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test($(this).val().toLowerCase())) { if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) { $("#dvPreview").show(); $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val(); } else { if (typeof(FileReader) != "undefined") { $("#dvPreview").show(); $("#dvPreview").append("<img class=load>"); var reader = new FileReader(); reader.onload = function(e) { $("#dvPreview img").attr("src", e.target.result); } reader.readAsDataURL($(this)[0].files[0]); } else { alert("This browser does not support FileReader."); } } } else { alert("Please upload a valid image file."); } }); }); 

 .load { width: 20%; } #dvPreview { filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); min-height: 400px; min-width: 400px; display: none; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" language="javascript"></script> <script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <form method="post"> <input id="fileupload" type="file" multiple="multitple" class="multi with-preview" /> <hr /> <b>Live Preview</b> <br /> <br /> <div id="dvPreview"> </div> </form> 

Answer 1

$("#fileupload").change(function () {
        $("#dvPreview").html("");

在Image上，將#dvPreview div更改為空。

這里的代碼$("#dvPreview").html(""); 將div重置為empty因此請remove此代碼並嘗試使用。

Answer 2

實際上，您可以使用URL.createObjectURL ，它比FileReader簡單得多，並且它也是同步的……而且順便說一句，您正在加載多個jquery版本...

 jQuery(function($) { var URL = window.URL || window.webkitURL || {} // no idea to add listener to the elm since you can't show them if(!URL.createObjectURL) return console.info("can't preview images") $("#fileupload").change(function() { $("#dvPreview").html("") // using the Image we can actually test if it's a image no mather what // extension it is. This would avoid simple hacks when client change // `hack.js` to `hack.png` // since you have multiple files you can not do `$(this).val()` // Sometimes you don't need jQuery... `this.value` is simpler here... // instead you need to loop over the `files` property... for (let file of this.files) { // screw older ie versions let img = new Image img.src = URL.createObjectURL(file) img.onload = () => { $("#dvPreview").show() $("#dvPreview").append(img) } img.onerror = () => { // the file is not an image } } }) }) 

 .load { width: 20%; } #dvPreview { filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); min-height: 400px; min-width: 400px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- you are loading multple jquery version!! --> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> --> <form method="post"> <!-- using accept="image/*" means that you are gona get right format --> <input id="fileupload" accept="image/*" type="file" multiple="multitple" class="multi with-preview" /> <hr> <b>Live Preview</b> <br><br> <div id="dvPreview"></div> </form> 

Answer 3

這是因為您的腳本導入行錯誤。

<script src="path/to/your/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

您僅看到一個圖像預覽，因為尚未加載jquery.MultiFile.js。 您可以通過瀏覽器的開發者工具檢查該錯誤是否發生。

用項目中腳本文件的實際文件路徑或CDN的URL替換“ src”路徑。 像這樣。

<script src="/Scripts/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

您需要從此處下載 jquery.MultiFile.js，然后將其復制到項目的Script文件夾中。

祝好運