如何使 ajaxfileupload 与动态生成的文件输入一起工作

Posted 2023-05-08

【中文标题】如何使 ajaxfileupload 与动态生成的文件输入一起工作

【英文标题】：How to make ajaxfileupload work with dynamically generated file inputs

【发布时间】：2013-12-13 20:52:12

【问题描述】：

我需要在我的项目中使用这个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，就好像没有选择文件一样。

任何想法为什么会发生这种情况？？

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

提前致谢。

【参考方案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>"
  );