如何將自定義屬性添加到文件形式的javascript / jquery

Question

我的目標是發送包含圖像和height和width等其他信息的文件格式。 我不知道如何向文件表單對象添加一些自定義道具。

 $("#saveImg").on('click', function () {
        var formData = new FormData(),
            allFiles = [];
    $('input[name=fileUpload]').each(function (index) {
        if (inputFileValidation(this)) {
            (function (files) {
                if (files.length != 0) { allFiles.push(files[0]); }
            })(this.files)
        }
    });

    for (var i = 0; i != allFiles.length; i++) {
        var img = new Image()
        img.src = window.URL.createObjectURL(allFiles[i]);
        $(img).on('load', function () {
            formData.append("files_h", img.naturalHeight);
            formData.append("files_w", img.naturalWidth);
            formData.append("files", allFiles[i]);
            window.URL.revokeObjectURL(allFiles[i]);
        });
    }

    $.ajax({
        url: '@Url.Action("Upload", "Image")',
        data: formData,
        processData: false,
        contentType: false,
        type: "POST",
        success: function () {}
        errors: function () {}
    });
});


[HttpPost]
public async Task<IActionResult> Upload (IList<IFormFile> files)
{
    //do something ;
}

我也嘗試過：

[HttpPost]
public async Task<IActionResult> Upload (IList<IFormFile> files, IList<IFormFile> files_h, IList<IFormFile> files_w)
{
    //do something ;
}

也許您還有另一個想法，如何發送帶有其他數據的圖像？ 我試圖將文件格式和其他信息轉換為JSON無效。

編輯謝謝大家的建議，它們對我來說真的很重要，因為將來我一定會使用它們。

但是，在這個項目中，由於file reader的asynchrony ，我已經放棄了使用file reader ，並且對promise感到很開心。 目的是簡單，減少javascript ，增加c#

對於在標題javascript和jquery誤導您的行為，我深表歉意，並標記與c #相關的答案。 我這樣做是因為此答案與我的下一個任務有關，因為CoreCompat.System.Drawing庫無疑對於將來編輯照片仍然有用。

謝謝！！

Answer 1

這是一種方法 ; 從那里取：

$('#btnUpload').click(function () {  

    // Checking whether FormData is available in browser  
    if (window.FormData !== undefined) {  

        var fileUpload = $("#FileUpload1").get(0);  
        var files = fileUpload.files;  

        // Create FormData object  
        var fileData = new FormData();  

        // Looping over all files and add it to FormData object  
        for (var i = 0; i < files.length; i++) {  
            fileData.append(files[i].name, files[i]);  
        }  

        // Adding one more key to FormData object  
        fileData.append('username', ‘Manas’);  

        $.ajax({  
            url: '/Home/UploadFiles',  
            type: "POST",  
            contentType: false, // Not to set any content header  
            processData: false, // Not to process data  
            data: fileData,  
            success: function (result) {  
                alert(result);  
            },  
            error: function (err) {  
                alert(err.statusText);  
            }  
        });  
    } else {  
        alert("FormData is not supported.");  
    }  
});  

另一種方法是使用FileReader類讀取上載的文件，並將其轉換為基本64字符串。 然后，您可以將base 64字符串發送到服務器。

Answer 2

如果要在ASP.NET Core中上載圖像時獲取Width和Height屬性。 我建議您安裝此軟件包： CoreCompat.System.Drawing

安裝包CoreCompat.System.Drawing -Version 1.0.0-beta006

---

在服務器中，將文件保存到特定路徑后。 您可以使用System.Drawing.Image類獲取Width和Height屬性：

using (var image = System.Drawing.Image.FromFile(filePath))
{
    int width = image.Width;
    int height = image.Height;
}

發送到服務器之前， files_w在客戶端模型中添加files_h和files_w屬性。

---

然后，通過這種方式，我將您的js代碼編輯為：

 $("#saveImg").on('click', function () {
    var formData = new FormData();

    for (var input of Array.from($('input[name=fileUpload]')))
    {
        if (inputFileValidation(input) && input.files.length) {
            formData.append('files', input.files[0]);
        }
    }

    $.ajax({
        url: '@Url.Action("Upload", "Image")',
        data: formData,
        processData: false,
        contentType: false,
        type: "POST",
        success: function () {}
        errors: function () {}
    });
});