使用 AJAX & ASP.NET 上传包含文本的文件

Question

我在单个 AJAX post 中从 textbox/textarea 上传文件和值时遇到问题。整个项目是用 AJAX post 创建的，用于发送数据和接收结果 html/data。这意味着每个按钮都由 javascript/jquery 而不是 asp.net 的默认 onClick 处理。在线搜索通过文件上传产生答案，但其中 none 显示或解释了任何传递其他 parameters/data 的方法。

*EDIT - 我没有收到任何特定错误或尝试此操作时崩溃。我尝试把运行文件上传代码中的说明上传成功或者反之。即使我将其切换为异步，它似乎也无法运行两者。我更想获得一个 AJAX post 来发送要在一个代码隐藏函数中处理的文件和注释。

*EDIT（由于重复标记）- 这是 ASP.NET，而不是 php。请在跳转到 duplicate/closed 结论之前完整阅读问题。

以下是我目前所拥有的code/example。

HTML :

<div id="Modal_New_Document" class="modal fade" role="dialog">
    <div class="modal-dialog Modal-Wrapper">
        <div class="modal-content">
            <div class="modal-header Modal-Header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Upload New Document</h3>
            </div>
            <div class="modal-body Modal-Body">
                <table>
                    <tr>
                        <th>Document :</th>
                        <td>
                            <input type="file" id="FileUpload_Modal_Document" />
                        </td>
                    </tr>
                    <tr>
                        <th>Note :</th>
                        <td>
                            <textarea id="TextArea_Modal_Document_Note" style="width: 400px;"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer Modal-Footer">
                <button type="button" class="btn btn-success" onclick="enterDocumentInfo()">Upload</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

这是最重要的部分。我更喜欢使用 $.Ajax 上传，如下例所示。我只能上传文件以使用 submitDocument() Javascript :

function submitDocument()
{
    var fileUpload = $("#FileUpload_Modal_Document").get(0);
    var files = fileUpload.files;

    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }

    var options = {};
    options.url = "FileUploadHandler.ashx";
    options.type = "POST";
    options.data = data;
    options.contentType = false;
    options.processData = false;
    options.success = function (result) { alert("Gud"); };
    options.error = function (err) { alert(err.statusText); };
    $.ajax(options);    
}

$.ajax({
    type: "POST",
    url: "Lease_View.aspx/enterDocument",
    data: JSON.stringify({
        leaseID: leaseID,
        userID: userID,
        note: note
    }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function ()
    {
        // Gud
    },
    error: function ()
    {
        // Bad
    }
});

代码隐藏文件上传

public class FileUploadHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                // Upload code here
            }
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write("File(s) Uploaded Successfully!");
    }

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

WebMethod 代码隐藏

我更喜欢通过这个而不是上面的方式上传文件。

[System.Web.Services.WebMethod]
    public static void enterDocument(string leaseID, string userID, string note)
    {
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString);
        SqlCommand cmd;
        cmd = new SqlCommand("INSERT INTO Lease_Documents " +
                    "(File_Name) " +
                    "VALUES " +
                    "(@File_Name)", conn);
        cmd.Parameters.AddWithValue("@File_Name", note);
        conn.Open();
        cmd.ExecuteNonQuery();
        conn.Close();
    }

Answer 1

我明白了。基本上如何传递附加参数是在 javascript 中使用 data.append(name, value)。您可以使用 (HttpContext)context.Request.Form["name"] 在 .ashx 处理程序中接收值。不幸的是，它使用的是处理程序而不是 web 方法，但至少它是有效的。

在Javascript

var data = new FormData();
for (var i = 0; i < files.length; i++) {
    data.append(files[i].name, files[i]);
}
data.append("Note", note);

代码隐藏

string note = context.Request.Form["Note"].ToString();

使用 AJAX & ASP.NET 上传包含文本的文件

Upload file with text using AJAX & ASP.NET

javascript

asp.net

ajax

jquery

jquery-file-upload