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了，并且对promise很感兴趣。目标很简单，javascript较少，c#则更多

对于在标题javascript和jquery中的误导，我深表歉意，并在答案中标记与c #相关。我这样做是因为这个答案与我的下一个任务有关，因为CoreCompat.System.Drawing库无疑对将来编辑照片仍然有用。

谢谢！

Answer 1

这是one approach；从那里取来的：

-1

Another approach用于使用FileReader类读取上载的文件，并将其转换为基本64字符串。然后，您可以将base 64字符串发送到服务器。

Answer 2

如果要在ASP.NET Core中上载图像时获取Width和Height属性。建议您安装此软件包：CoreCompat.System.Drawing

安装软件包CoreCompat.System.Drawing-版本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_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 () {}
    });
});

如何将自定义属性添加到文件形式的javascript / jquery

2 个答案: