jquery - 如何使 ajaxfileupload 使用动态生成的文件输入

Question

我需要使用这个plugin对于我的项目，但它似乎只有在将文件输入放入原始代码中时才能正常工作。但是，当我尝试从动态生成的文件输入中调用它时， context.Request.Files.Count 始终返回 0。

这是article我用作指导:

这就是我尝试根据我的需要调整该文章的方法:

ASPX 和 jQuery:

<%@ Page Title="Página principal" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnGenerateFileInputs").click(function () {
                var body = $("#tbDatos > tbody");
                for (var i = 1; i <= 10; i++) {
                    var row = $("<tr>");
                    var col = $("<td>");
                    col.append(
                    "<div><input id='fupFile_" + i + "' type='file' accept='application/vnd.openxmlformats-officedocument.SpreadsheetML.Sheet'/>" +
                    "<input id='btnUpload_" + i + "' type='button' value='Upload' />" +
                    "</div>"
                    );
                    row.append(col);
                    body.append(row);
                    add_clickUploadFile("btnUpload_" + i);
                }
            });
            function add_clickUploadFile(elemId) {
                elem = $("#" + elemId);         
                elem.on('click', function () {
                    var idFileUpload = $(this).prev().attr("id");
                    $.ajaxFileUpload({
                        url: 'AjaxFileUploader.ashx',
                        secureuri: false,
                        fileElementId: idFileUpload,
                        dataType: 'json',
                        success: function (data, status) {
                            if (typeof (data.error) != 'undefined') {
                                if (data.error != '') {
                                    alert(data.error);
                                } else {
                                    alert(data.msg);
                                }
                            }
                        },
                        error: function (data, status, e) {
                            alert(e);
                        }
                    });
                    return false;                    
                });
            }            
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <input id="btnGenerateFileInputs" type="button" value="Generate File Inputs" />
    <table id="tbDatos" style="width: 100%;">
        <tbody>
        </tbody>
    </table>
</asp:Content>

处理程序:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace jQueryFileUpload
{
    
    public class AjaxFileuploader : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                string path = context.Server.MapPath("~/Temp");
                if (!Directory.Exists(path))
                    Directory.CreateDirectory(path);

                var file = context.Request.Files[0];

                string fileName;

                if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE")
                {
                    string[] files = file.FileName.Split(new char[] { '\\' });
                    fileName = files[files.Length - 1];
                }
                else
                {
                    fileName = file.FileName;
                }
                string strFileName = fileName;
                fileName = Path.Combine(path, fileName);
                file.SaveAs(fileName);


                string msg = "{";
                msg += string.Format("error:'{0}',\n", string.Empty);
                msg += string.Format("msg:'{0}'\n", strFileName);
                msg += "}";
                context.Response.Write(msg);


            }
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
}

本文中的示例与我上面发布的代码之间的主要区别如下:

我决定这样做，而不是在创建按钮时直接调用 JavaScript 函数:

然后当单击按钮时，调用处理程序，传递当前文件输入的 id。

正如我之前告诉您的，处理程序被调用，但 context.Request.Files.Count 始终返回 0，就好像没有选择文件一样。

有什么想法为什么会发生这种情况吗？

一如既往，我们将不胜感激任何建议或指导。

提前致谢。

Answer 1

我在您的代码和文章的代码中看到的区别是您的输入字段缺少“名称”属性。因此尝试更改以下代码:

col.append(
    "<div><input id='fupFile_" + i + "' type='file' accept='application/vnd.openxmlformats-officedocument.SpreadsheetML.Sheet'/>" +
    "<input id='btnUpload_" + i + "' type='button' value='Upload' />" +
    "</div>"
  );

到

col.append(
    "<div><input id='fupFile_" + i + "' name='fupFile_" + i + "' type='file' accept='application/vnd.openxmlformats-officedocument.SpreadsheetML.Sheet'/>" +
    "<input id='btnUpload_" + i + "' name='btnUpload_" + i + "' type='button' value='Upload' />" +
    "</div>"
  );