使用jQuery AJAX和Handler（ashx）上传文件无法工作

Question

我正在尝试使用jQuery AJAX和通用处理程序上传图像文件。但似乎文件没有传递给处理程序。 提交后，context.Request.Files [0];始终为空： - /

我做错了什么？

HTML：

<form id="form1" runat="server" method="post" enctype="multipart/form-data">

    <input name="file" id="file" type="file" />
    <input id="save" name="submit" value="Submit" type="submit" />

</form>

JS:

$().ready(function ()
{
    $('#file').change(function () 
    {
        sendFile(this.files[0]);
    });
});

function sendFile(file) 
{
    $.ajax({
        type: 'post',
        url: 'FileUpload.ashx',
        data: file,
        success: function () {
            // do something
        },
        xhrFields:
        {
            onprogress: function (progress) 
            {
                // calculate upload progress
                var percentage = Math.floor((progress.total / progress.totalSize) * 100);

                // log upload progress to console
                console.log('progress', percentage);

                if (percentage === 100) {
                    console.log('DONE!');
                }
            }
        },
        processData: false,
        contentType: 'multipart/form-data'
    });
}

ASHX:

public void ProcessRequest (HttpContext context) 
{
    HttpPostedFile file = context.Request.Files[0];

    if (file.ContentLength > 0)
    {
        //do something
    }
}

- Ricky

---

你的代码中有一处jQuery引用对吗？ - emd

是的，我有。处理程序被调用了，但没有加载文件 :-/ - Ricky

Answer 1

成功解决了这个问题 :)

这是我的代码...

///create a new FormData object
var formData = new FormData(); //var formData = new FormData($('form')[0]);

///get the file and append it to the FormData object
formData.append('file', $('#file')[0].files[0]);

///AJAX request
$.ajax(
{
    ///server script to process data
    url: "fileupload.ashx", //web service
    type: 'POST',
    complete: function ()
    {
        //on complete event     
    },
    progress: function (evt)
    {
        //progress event    
    },
    ///Ajax events
    beforeSend: function (e) {
        //before event  
    },
    success: function (e) {
        //success event
    },
    error: function (e) {
        //errorHandler
    },
    ///Form data
    data: formData,
    ///Options to tell JQuery not to process data or worry about content-type
    cache: false,
    contentType: false,
    processData: false
});
///end AJAX request

- Ricky

---

感谢您发布这个……对我来说非常有效。 - urbanlemur

完美，我在网上找到的其他“解决方案”似乎对我没有用，但这个有效。 - JakePlatford

Answer 2

当我实现这样的事情时，我使用

。

var fd = new FormData();
fd.append(file.name,file);

在ajax调用中，发送fd。

- kobigurk

---

修改后处理程序没有被调用，可能是什么问题？ - Ricky

可能是客户端错误。如果您有实时示例，那就太好了。如果没有，并且您正在使用Chrome / Firefox，请检查调试器控制台并告诉我您在那里看到了什么。 - kobigurk

在控制台中我得到了以下错误：Uncaught SyntaxError: Not enough arguments 我已经上传了演示，你可以试一下：在线演示 - Ricky

我更正了我的答案 - 我错误地省略了第一个参数，即文件名。 - kobigurk

现在我遇到了这个错误：POST http://localhost:10081/FileUpload.ashx 500 (Internal Server Error) x.support.cors.e.crossDomain.send x.extend.ajax sendFile (anonymous function) x.event.dispatch y.handle - Ricky

现在是一个服务器端错误 - 你能给我们看一下你的日志吗？如果你的异常没有被捕获，那么错误就会出现在事件日志中。 - kobigurk