عدم post چند عکس همزمان

[leilast]

سلام
من برای آپلود عکس در دیتابیس از فایل آپلودر زیر استفاده کردم.
اما در قسمت بعد از کادر یک باتن گذاشتم که عکس هایی که پیش نمایششون رو نشون میده post کنه به دیتابیس (البته آدرسشون رو). اما با زدن دکمه submit اصلا فرم post نمیشه.
https://www.jqueryscript.net/demo/Drag-And-Drop-File-Uploader-With-Preview-Imageuploadify/

فکر میکنم مربوط به کدهای جاوا اسکریپت باشه چون با کدهایی که دارم عکس های صفحات دیگه رو ارسال کردم.
این کد کنترلر هست


public ActionResult UploadImages(DailyImage dailyimage,HttpPostedFileBase UploadDailyImage)
{
string path = Path.Combine(Server.MapPath("~/Images/Daily"), Path.GetFileName(UploadDailyImage.FileName));
dailyimage.ImgName = Path.GetFileName(UploadDailyImage.FileName);
UploadDailyImage.SaveAs(path);
if (ModelState.IsValid)
{

if (BlDailyImage.Add(dailyimage))
{
return JavaScript("alert('با موفقیت ثبت شد')");
}
else
{
return JavaScript("alert('خطایی در ثبت رخ داده است')");
}
}

else
{
return JavaScript("alert('مقادیر ورودی اشتباه است')");
}


}



این هم ویو



@using (Html.BeginForm("UploadImages", "Admin", FormMethod.Post, new { enctype = "multipart/form-data", id = "MyUploadImages" }))
{
<div class="row">
<div class="container" style="margin-top: 20px;">


<form>
<input type="file" name="DailyImage" accept="image/*" multiple>
</form>


</div>
</div>
<div class="row">
<br />
<button type="submit" class="btn btn-block btn-success">ذخیره</button>

</div>
}




ممنون میشم راهنماییم کنید.

[leilast]

این کد جاوااسکریپت هست.
میشه بگین چه نغییری بده تا فرم پست بشه؟


<script>
(function($, window, document, undefined) {

// Prevent issues about browser opening file by dropping it.
window.addEventListener("dragover", function(e) {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", function(e) {
e = e || event;
e.preventDefault();
}, false);


const compareMimeType = (mimeTypes, fileType, formatFile) => {


// If accept is defined as *.
if (mimeTypes.length < 2 && mimeTypes[0] === "*") {
return true;
}


// Checking all types written in accept.
for (let index = 1; index < mimeTypes.length; index+=3) {


// image/*, audio/*, video/*
if (mimeTypes[index + 1] === "*" &&
fileType.search(new RegExp(mimeTypes[index])) != -1) {
return true;
}
// application/vnd.ms-excel, application/vnd.ms-powerpoint
else if (mimeTypes[index + 1] && mimeTypes[index + 1] != "*" &&
fileType.search(new RegExp("\\*" + mimeTypes[index + 1] + "\\*")) != -1) {
return true;
}
// application/pdf, image/jpg
else if (mimeTypes[index + 1] && mimeTypes[index + 1] != "*" &&
fileType.search(new RegExp(mimeTypes[index + 1])) != -1) {
return true;
}
// .jpg, .pdf .png
else if (mimeTypes[index + 1] === "" &&
(fileType.search(new RegExp(mimeTypes[index])) != -1 || formatFile.search(new RegExp(mimeTypes[index])) != -1)) {
return true;
}
}
return false;
}


// Define the plugin imageuploadify.

// Override default option with user's if exist.

// Initialize every element.

// Save the current element to self to avoid conflict.

// Apply on input file having "multiple" attribute only.

// Save accept files

// Loop the array of accept files to split all part of mimetype or format.

// Select the regexp according to the result (mimetype or format)

// Exec the regexp and then


// Array containing all files add by dialog box or drag'n drop.

// Count the number of time a "dragenter" enter the box.



// Define the dragbox layout.


// Save all elements of the dragbox.


/** FUNCTIONS **/




// Function to read and store files.
const retrieveFiles = (files) => {


for(let index = 0; index < files.length; ++index) {
if (!accept || compareMimeType(result, files[index].type, /(?:\.([^.]+))?$/.exec(files[index].name)[1])) {
// Unique number to save the image.
const id = Math.random().toString(36).substr(2, 9);


readingFile(id, files[index]);
totalFiles.push({
id: id,
file: files[index]
});
}
}
}


// Function to read a file.
const readingFile = (id, file) => {
const fReader = new FileReader();


// Compute the number of box that could fit in the dragbox and the
// margin according to it.

// Create the preview file container box.

// Preview file container box CSS


// Manage display/hidding details about preview files.


// If the given file in the parameter is an image.

// Associated function to a ending load

// Create the image tag for preview.

// Paste the image source to display the image preview.
image.attr("src", e.target.result);


// Append the image to its container and then the container to the
// list of files.
container.append(image);
imagesList.append(container);


// Apply left margin to first container of each row and right to last.


// If the file is an audio file, replace the icon by an audio file icon.

// If the file is an video file, replace the icon by an video file icon.


// Associated function to a ending load
fReader.onloadend = function (e) {
// Create the span tag for the file type.


// Span CSS.


// Append the span to its container and then the container to the
// list of files.

// Apply left margin to first container of each row and right to last.

// Delete the file from the list.

// Use the FileReader to read the content of a File.

// Display the overlay and change the dragbox border color.

// Disable pointer events to avoid miscapture dragexit children's events.

// Hide the overlay and put back the dragbox border color.

// Enable back pointer events to capture click, hover...


/** EVENTS */

// Change the color background of the button according to the mouse.

// When click on the button, simulate click on the original input.
button.on("click", function onClick(event) {
event.stopPropagation();
event.preventDefault();
$(self).click();
});


// Manage events to display an overlay when dragover files.


// Manage events to hide the overlay when dragout files.


// Decrease the counter.
counter--;


// If the counter is equal to 0 (means that the files are entirely out
// of the dragbox).
if (counter === 0) {
enableMouseEvents();
}
});


// Manage events when dropping files.
dragbox.on("drop", function onDrop(event) {
event.stopPropagation();
event.preventDefault();


enableMouseEvents();
// Retrieve the dragged files.
const files = event.originalEvent.dataTransfer.files;


// Read all files (to add them to the preview and push them to the files
// list to submit).
retrieveFiles(files);
});


// Binding resize event to the window.
$(window).bind("resize", function(e) {
window.resizeEvt;
$(window).resize(function () {
// Delete the timeout as long as the window is still resizing.
clearTimeout(window.resizeEvt);
// Compute and change the margin according to the size of the window after
// 0.5 seconds after resizing.
window.resizeEvt = setTimeout(function() {
// Compute the number of box that could fit in the dragbox and the
// margin according to it.
const width = dragbox.width();
const boxesNb = Math.floor(width / 100);
const marginSize = Math.floor((width - (boxesNb * 100)) / (boxesNb + 1));


// Reset all margins of containers boxes.
let containers = imagesList.find(".imageuploadify-container");
for (let index = 0; index < containers.length; ++index) {
$(containers[index]).css("margin-right", "0px");
$(containers[index]).css("margin-left", marginSize + "px");
}


// Apply left margin to first container of each row and right to last.
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+4)").css("margin-left", marginSize + "px");
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+3)").css("margin-right", marginSize + "px");
}, 500);
});
})


// Detect when adding files through the dialog box to preview those files
// and add them to the array.
$(self).on("change", function onChange() {
const files = this.files;
retrieveFiles(files);
});


// When submitting the form.
$(self).closest("form").on("submit", function(event) {
// Stop the original submit.
event.stopPropagation();
event.preventDefault(event);
// Retrieve all form inputs.
const inputs = this.querySelectorAll("input, textarea, select, button");
// Create a form.
const formData = new FormData();


// Add all data to the form (selected options, checked inputs, etc...).
for (let index = 0; index < inputs.length; ++index) {
if (inputs[index].tagName === "SELECT" && inputs[index].hasAttribute("multiple")) {
const options = inputs[index].options;
for (let i = 0; options.length > i; ++i) {
if (options[i].selected) {
formData.append(inputs[index].getAttribute("name"), options[i].value);
}
}
}
else if (!inputs[index].getAttribute("type") || ((inputs[index].getAttribute("type").toLowerCase()) !== "checkbox" && (inputs[index].getAttribute("type").toLowerCase()) !== "radio") || inputs[index].checked) {
formData.append(inputs[index].name, inputs[index].value);
}
else if ($(inputs[index]).getAttribute("type") != "file") {
formData.append(inputs[index].name, inputs[index].value);
}
}


// Add all files get from the dialog box or drag'n drop,
for (var i = 0; i < totalFiles.length; i++) {
formData.append(self.name, totalFiles[i].file);
}


// Create an request and post all data.
var xhr = new XMLHttpRequest();


// When the request has been successfully submitted, redirect to the
// location of the form.
xhr.onreadystatechange = function(e) {
if (xhr.status == 200 && xhr.readyState === XMLHttpRequest.DONE) {
window.location.replace(xhr.responseURL);
}
}


xhr.open("POST", $(this).attr("action"), true);
xhr.send(formData);


return false;
});




// Hide the original input.
$(self).hide();
// Insert the dragbox after the original hidden input.
dragbox.insertAfter(this);
});
// Return "this" to ensure that chaining methods can be called.
return this;
};




// Default configuraiton of the plugin.
$.fn.imageuploadify.defaults = {
};


}(jQuery, window, document));
</script>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="file"]').imageuploadify();
})
</script>
<script type="text/javascript">


var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);


(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();


</script>