我想要上传更多图片

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文件夹中。

祝好运