How do I use AJAX to upload files to ASP.NET?

I am trying to upload files using AJAX to ASP.NET. I have this 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]); }

files is an Array()

Then I try to access the post file in C# code, but the value is always null. How can I resolve this issue?

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

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

    

Answer1:

Assuming you have the following form containing the file input field:

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

you could try the following function:

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

Now on the server you should be able to retrieve the file using Request.Files.

Answer2:

You can also use jQuery

you have 2 functions Ajax : http://api.jquery.com/jQuery.ajax/ Load(shortcut, calls ajax) : http://api.jquery.com/load/ Examples : http://www.w3schools.com/jquery/jquery_ajax.asp <strong>Edited</strong> : 2012-10-04 16:31 <strong>Reason</strong> : Got the following Comment : Hm unless I don't understand, I don't want to load informations of the server, I want to get the informations I have in my JS code on my server. I already have the informations to send in the files Array(). – Elfayer

What you do is you make a AJAX call to the server like to an webservice. Here is an example

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"); } });

in the data parameter you give your data. I send it here in the form of an array but you can send it also like 1 parameter. How do you access it in well in my case a generic handler.

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

Like I said I give it in the form of an array so I only have one parameter and then I split it. But if you would give it like single properties then you could get it like :

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

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:How do I use AJAX to upload files to ASP.NET?