Question

我必须将文件以及有关这些文件的一些描述发送到服务器。

因此，根据上面的图片，我想上传一个文件，并在文件框的右侧提供文件说明。单击选择文件链接后，用户可以选择要上载的另一个文件，它也将具有描述文本框。单击上传文件后，连同文件，它的描述将上传到服务器。我正在使用 plupload 来执行此操作。但它只是上传文件而不是描述。另外，我正在使用MVC。所以请建议任何解决方案或建议任何其他可以满足我的要求的JavaScript库。

以下是MVC代码，

           public string Upload(List<HttpPostedFileBase> fileUploads,List<string> fileDescription) 
    {
        int count = 0;
        foreach (HttpPostedFileBase file in fileUploads)
        {
            byte[] fileData = new byte[file.ContentLength];
            file.InputStream.Read(fileData, 0, file.ContentLength);
            db.UploadedFiles.AddObject(new UploadedFile
            {
                FileDescription = fileDescription[count],
                FileBinary = fileData,
                FileName = file.FileName
            });
            count++;
        }
        db.SaveChanges();
        return "Success";
    }

以下是javascript代码

      var uploadFiles = [];
        var descs = [];
        var count = 0;
        plupload.each(uploader.files, function (file) {
        var id = file.id;
        var fileUpload = file;
        uploadFiles[count] = file;
        descs[count] = $("#" + id + "_desc").val();
        count++;
    });
    var da = { fileDescription: descs,fileUploads: uploader.files };
            $.ajax({
            url: '/LumosQC/Upload',
               data: da,
               method: 'POST',
            }).done(function (data1) {
                alert("Success");
            }).error(function (a, b, c) {
               console.log(a);
           });

Answer 1

您可以修改用于上传的路线并使用

之类的路线

...
        [Route("upload/{description}")]
        public HttpResponseMessage Upload(string description)
...

或者您可以将描述放入cookie中（但我建议使用第一种方法更清洁）

function createCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

createCookie('desciption', 'your description', 1)

然后

Request.Cookies["description"]

<强>更新

现在我看到您需要上传多个文件，因为您可以使用与修改后的路径相同的方法

[Route("upload")]
public string Upload(List<HttpPostedFileBase> fileUploads, [FromUri] string[] fileDescription)

Answer 2

创建视图模型并在操作方法中用作参数

ViewModel：

public class UploadViewModel
{
    public List<string> FileDescriptions;
    public List<HttpPostedFileBase> Files;
}

行动方法：

public string Upload(UploadViewModel model) 
{
    // ....
}

将正确绑定数据。

使用文件上传数据

2 个答案: