如何使用Ajax在ASP.NET MVC中上传多张图片

Hey there, let's sort out this multi-image upload problem where each image gets saved to its own unique folder. I'll walk you through updating your front-end, setting up the Ajax call, and writing the controller logic to make this work.

1. Update Your HTML for Multiple File Selection #

First, tweak your file input to allow selecting multiple files, and add a simple status container to show upload results:

<div class="row" style="margin-top:20px;">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="col-md-4" style="margin:0 !important;">
            <label style="margin-top:5px; margin-left: -15px;">Select Images</label>
        </div>
        <div class="col-md-8">
            <!-- Add the `multiple` attribute to pick multiple files -->
            <input type="file" id="imageFiles" name="imageFiles" multiple accept="image/*" class="form-control" />
            <!-- Container to display upload status -->
            <div id="uploadStatus" class="mt-2"></div>
        </div>
    </div>
</div>

2. Ajax Code for Multi-File Submission #

We'll use FormData to send all selected files to the server. Here's the jQuery/Ajax snippet:

$(document).ready(function () {
    $("#imageFiles").on("change", function () {
        const formData = new FormData();
        const selectedFiles = this.files;

        // Add each file to the FormData object
        for (let i = 0; i < selectedFiles.length; i++) {
            formData.append("imageFiles", selectedFiles[i]);
        }

        $.ajax({
            url: "/YourController/UploadMultipleImages", // Replace with your actual controller/action
            type: "POST",
            data: formData,
            contentType: false, // Critical: Don't set content type for FormData
            processData: false, // Critical: Don't process the data (let browser handle it)
            success: function (response) {
                if (response.success) {
                    $("#uploadStatus").html('<div class="alert alert-success">All images uploaded successfully!</div>');
                } else {
                    $("#uploadStatus").html(`<div class="alert alert-danger">Upload failed: ${response.message}</div>`);
                }
            },
            error: function () {
                $("#uploadStatus").html('<div class="alert alert-danger">Oops, something went wrong during upload.</div>');
            }
        });
    });
});

3. Controller Action to Handle Uploads & Create Unique Folders #

Now, write the controller action that receives the files, creates a unique folder for each image, and saves the file there. We'll use GUIDs for folder names to avoid any conflicts:

using System;
using System.IO;
using System.Web;
using System.Web.Mvc;

public class YourController : Controller
{
    [HttpPost]
    public JsonResult UploadMultipleImages()
    {
        try
        {
            // Define the root upload directory (e.g., ~/Uploads/)
            var rootUploadDir = Server.MapPath("~/Uploads/");
            
            // Create root folder if it doesn't exist
            if (!Directory.Exists(rootUploadDir))
            {
                Directory.CreateDirectory(rootUploadDir);
            }

            // Loop through each uploaded file
            foreach (var fileKey in Request.Files)
            {
                var uploadedFile = Request.Files[fileKey.ToString()];
                
                if (uploadedFile != null && uploadedFile.ContentLength > 0)
                {
                    // Create a unique folder for this image (GUID ensures no duplicates)
                    var uniqueFolderName = Guid.NewGuid().ToString();
                    var imageFolderPath = Path.Combine(rootUploadDir, uniqueFolderName);
                    
                    // Create the folder
                    Directory.CreateDirectory(imageFolderPath);

                    // Get the original filename and build the full path
                    var fileName = Path.GetFileName(uploadedFile.FileName);
                    var fullFilePath = Path.Combine(imageFolderPath, fileName);

                    // Save the file to its unique folder
                    uploadedFile.SaveAs(fullFilePath);
                }
            }

            return Json(new { success = true, message = "All images saved to their own folders!" });
        }
        catch (Exception ex)
        {
            // Return error details if something breaks
            return Json(new { success = false, message = ex.Message });
        }
    }
}

Important Things to Check #

• Folder Permissions: Make sure your web server has write access to the ~/Uploads/ directory. Without this, uploads will fail silently.
• File Validation: Add checks for file size, file type (e.g., only allow JPG/PNG), and valid filenames to prevent bad uploads.
• Error Logging: For production, consider logging exceptions instead of just returning the message to users.
• Folder Naming: If you don't want GUIDs, you could use a timestamp + original filename (but GUIDs are safer for guaranteed uniqueness).

内容的提问来源于stack exchange，提问作者DloveJ