我想要上传更多图片

Question

I press the input button to select the number of images to both participating and want to look at a preview of the modern state does not know how this comes just one image. Ten would like to come out. Help

Take care of it under a html file 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("");

on Image change your reseting #dvPreview div to empty.

Here this code $("#dvPreview").html(""); reset your div to empty So remove this code and try it will work.

Answer 2

You can actually use URL.createObjectURL which is much simpler then FileReader and it's also synchronous... and btw, you are loading multiple jquery versions...

 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

This is because your script import line was wrong.

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

You seen only one image preview because properbly jquery.MultiFile.js has not been loaded. You can check that whether that error occured from browser's developer tool.

Replace the "src" path with your real file path of your script file in your project or with the url of the cdn. Just like this.

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

You will need to download the jquery.MultiFile.js from here download and copy it to your project's Script folder.

Goodluck