hello,
How to modify code so it does not show appended preview if user select one by one image so user should show one image if user selected multiple image so should show multiple image currently it is creating confusion for user
i am using this html to select multiple images and show preview it works well
then i am using function to upload images to directory
The problem is if user selects 5 images at once so all images upload perfectly, but if user select one image then second image, then third image then click on upload button so only last image gets uploaded.
it should upload all the images in all cases.
<script type="text/javascript">
$(function () {
$('[id*=fuUpload1]').change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("[id*=dvPreview]");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("style", "max-height:250px;width: 150px");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
dvPreview.html("");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
});
</script>
<div class="white-bg shadow">
<h4 class="padding15 no-margin">
Other Images of Product
</h4>
<hr class="no-margin" />
<br />
<label class="file-upload center">
<span class="btn btn-default"><i class="fa fa-image"></i> Select Images</span>
<asp:FileUpload ID="fuUpload1" runat="server" multiple="multiple" />
</label>
public string uploadfilemulti(HttpPostedFile postedFile)
{
string returnfilename = "";
if (postedFile.ContentLength > 0)
{
string uploadFileName = "";
string ext = Path.GetExtension(postedFile.FileName).ToLower();
if (ext == ".jpg" || ext == ".jpeg" || ext == ".gif" || ext == ".png" || ext == ".pdf" || ext == ".docx" || ext == ".pptx" || ext == ".xlsx" || ext == ".doc" || ext == ".xls" || ext == ".ppt")
{
uploadFileName = filename + Guid.NewGuid().ToString() + ext;
}
//file upload code save to directory
}
return returnfilename;
}