如何在 JQuery AJAX 文件上传中添加唯一标识符？答案

【问题标题】：How to add a unique identifier in JQuery AJAX File Upload?如何在 JQuery AJAX 文件上传中添加唯一标识符？
【发布时间】：2015-06-17 07:18:27
【问题描述】：

我正在使用在 asp.net mvc 应用程序中运行良好的以下代码，

在标题部分：

<script type="text/javascript">
    $(document).ready(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '@Url.Action("UploadFile", "Payment")',
            autoUpload: true,
            done: function (e, data) {
                $('.file_name').html(data.result.name);
                $('.file_type').html(data.result.type);
                $('.file_size').html(data.result.size);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        });
    });
</script>

在身体使用部分：

    <span>
        <span class="btn btn-success fileinput-button" style="width: 200px; float: left;">
            <span>Certificate: </span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
    </span>

问题在于，body 中会有多个使用站点，每个站点对应一个具有不同 Identity 的对象，因此当服务器上的操作响应文件上传时，它还需要获取一个额外的参数用于对象ID：

    <span>
        <span class="btn btn-success fileinput-button" style="width: 200px; float: left;">
            <span>Certificate for Object ID=100: </span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
    </span>  
    <span>
        <span class="btn btn-success fileinput-button" style="width: 200px; float: left;">
            <span>Certificate for Object ID=101: </span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
    </span>  
    <span>
        <span class="btn btn-success fileinput-button" style="width: 200px; float: left;">
            <span>Certificate for Object ID=102: </span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
    </span>

如何添加要发布到服务器的附加对象 ID 参数？

这是支付控制器代码上的操作：

    [HttpPost]
    public ContentResult UploadFile()
    {
        var r = new List<UploadFilesResult>();

        foreach (string file in Request.Files)
        {
            HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
            if (hpf.ContentLength == 0)
                continue;

            string savedFileName = Path.Combine(Server.MapPath("~/App_Data"), Path.GetFileName(hpf.FileName));
            hpf.SaveAs(savedFileName);

            r.Add(new UploadFilesResult()
            {
                Name = hpf.FileName,
                Length = hpf.ContentLength,
                Type = hpf.ContentType
            });
        }
        return Content("{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
    }

【问题讨论】：

使用类代替并在 jquery 选择器中：$('.fileupload')
3 个带有id="fileupload" 的元素是无效的html（无论如何只有第一个可以工作）。你能给他们起不同的名字吗？ - name="files-100[]", name="files-101[]"
它不是一个变量——它只是意味着你可以以Request.Files[files-100] 等方式访问它们，但我不确定这是否能满足你的需求——我有点不确定你在尝试什么去做
@Arjang，查看documentation，您应该能够使用$('#fileupload1').fileupload({ formData: { id: 100 }, url: '@Url.Action("UploadFile", "Payment")', ...}); 并将int id 作为参数包含在public ContentResult UploadFile(int id) { ..} 中——您需要为每个元素指定一个唯一的@ 987654334@ 所以你可以设置formData: { id: ### }
您还应该将您的方法更改为public JsonResult UploadFile(int id) 并使用return Json(new { name = r[0].Name, type = r[0].Type, etc }) 并使用data.name 等访问它。

标签： javascript c# jquery asp.net asp.net-mvc

【解决方案1】：

尝试使用 class 作为标识符而不是使用 id

【讨论】：

谢谢，Ehsan Sajjad 也提出了这个建议，但是如何传递一个额外的参数？