当前位置: 首页 > 面试题库 >

使用jQuery AJAX和Handler(ashx)上传文件无效

杜哲彦
2023-03-14
问题内容

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

我究竟做错了什么?

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
    }
}

问题答案:

设法使这个工作:)

这是我的代码…

///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


 类似资料:
  • 我正在使用Selenium WebDriver和PhantomJs(C#)。在此之前,我使用FireFox而不是PhantomJs,并以以下方式上传了一个文件: 我的问题: 然而,当我使用PhantomJS时,这将崩溃。 在我看来,对于许多使用PhantomJS+Selenium的人来说,这是一个常见的问题,这让我想知道为什么这个bug还没有得到修复。

  • 我的JSP页面是这样的: 以下是我的java代码: 返回。我真的不知道原因。

  • 这段javascript代码如下所示。注意,当file input元素的值发生变化时(即,一旦他们选择了要上传的文件),就会调用该命令 请原谅所有控制台日志。它的目的是显示输出和调试。 您将看到,我还附加了一个username字段,只是为了测试帖子是否在控制器中使用了一些完整的数据。的确是。以下是记录数组的输出: 有什么想法吗??

  • 我已成功将图像文件上载到。但是我在使用MockMvc测试时遇到了一个问题。当我运行测试用例时,我发现异常文件未找到,访问被拒绝。 控制器看起来像这样: 我的测试用例如下所示: 我的jsp文件如下所示:

  • 我需要上传文件使用Spring引导和角,所以这是控制器代码,很好地工作使用邮差 -component.ts代码: -HTML代码: 出现此错误

  • 我在我的Java API中使用了swagger-inflector V.1.0.17。以下是我构建API的基础:https://github.com/swagger-api/swagger-samples/tree/master/java/fintector-dropwizard-guice 我的文件上传API定义如下: 和控制器中的方法: