如何使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

我在您的代码和文章代码中可以看到的不同之处在于您的输入字段缺少“name”属性。因此，请尝试更改以下代码：

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>"
  );