如何使用AJAX将文件上传到ASP.NET?

时间:2012-10-04 11:22:41

标签: c# xmlhttprequest

我正在尝试使用AJAX将文件上传到ASP.NET。我有这个Javascript:

var xhr = new XMLHttpRequest();

for (var i = 0; i < files.length; i++) {
   xhr.open('post', '/File/Upload', true);
   xhr.setRequestHeader("Content-Type", "multipart/form-data");
   var formData = new FormData();
   formData.append("_file", files[i]);
   xhr.send(files[i]);
}

filesArray()

然后我尝试使用C#代码访问帖子文件,但值始终为null。我该如何解决这个问题?

// Method 1, Result: file = null
HttpPostedFileBase file = Request.Files["_file"];

// Method 2, Result: postedFile.Count = 0
HttpFileCollectionBase postedFile = Request.Files;

2 个答案:

答案 0 :(得分:3)

假设您有以下包含文件输入字段的表单:

<form action="/home/index" method="post" enctype="multipart/form-data" onsubmit="return handleSubmit(this);">
    <input type="file" id="_file" name="_file" multiple="multiple" />
    <button type="submit">OK</button>
</form>

您可以尝试以下功能:

function handleSubmit(form) {
    if (!FormData) {
        alert('Sorry, your browser doesn\'t support the File API => falling back to normal form submit');
        return true;
    }

    var fd = new FormData();
    var file = document.getElementById('_file');
    for (var i = 0; i < file.files.length; i++) {
        fd.append('_file', file.files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    xhr.send(fd);

    return false;
}

现在,您可以在服务器上使用Request.Files检索文件。

答案 1 :(得分:0)

您也可以使用jQuery

你有两个功能
阿贾克斯:http://api.jquery.com/jQuery.ajax/
加载(快捷方式,调用ajax):http://api.jquery.com/load/
示例:http://www.w3schools.com/jquery/jquery_ajax.asp

已编辑:2012-10-04 16:31
原因:得到以下评论:
Hm,除非我不理解,我不想加载服务器的信息,我想获取我的服务器上的JS代码中的信息。我已经有了发送文件Array()的信息。 - Elfayer

您所做的是对服务器进行AJAX调用,就像对Web服务一样。 这是一个例子

var value = 1;
var handlerUrl = [YOUR WEBSERVICE URL];

//Do the Ajax Call
jQuery.ajax({
  url: handlerUrl,
  data: { "params[]": [value] },
  type: 'POST',
  success: function (data)
  {
     alert("succes");
  },
  error: function (jxhr, msg, err)
  {
     alert("error");
  }
});

在数据参数中提供数据。
我以数组的形式发送它,但你也可以像1参数一样发送它。 在我的情况下,你如何很好地访问它是一个通用的处理程序。

//Split the parameters and set in Array of Strings
var param = context.Request.Form[0].Split(',');
var value = param[0];

就像我说的那样,我以数组的形式给它,所以我只有一个参数
然后我分开了。但是,如果你愿意像单一属性那样给它,那么你就是 可以得到它:

context.Request.Form[0]
context.Request.Form[1]
context.Request.Form[2]
context.Request.Form[3]
context.Request.Form[4]