在ASP.NET MVC中发布序列化的ASP.NET模型和带有单个Jquery Ajax调用的文件

Question

I am developing a movie library application in asp.net. In admin page, I need to add a movie to the database(details such as name, actors, poster url). And also I need to upload the trailer of the movie to a specific folder in the server.

In my AddMovie View(which is strongly typed to a MovieDetails Model), I have a forms to include movie information as text and with a file input to upload a file(movie trailer). Within my controller I get the binded MovieDetails model and the uploaded file seperately as two parameters as follows.

At first I just posted from my view to this controller without using ajax. I was able to get the Model and the file to the controller to do what I needed to do.

Then I moved to ajax and tried to do this without page refresh.

Now no files cannot be uploaded. I tried to debug and noticed that uploadFile parameter of the controller is null although I attached a file to the file input in the view.

Is there any way to post the model to the controller and upload the file without completely changing the controller and using a single ajax call?

Or else is it possible pass the file path through a model attribute, access that file path and upload the relevant file in the controller, using Ajax.

Thank you!

Answer 1

As Darin mentioned, there is no simple way to handle file-uploading matters via ajax for some security reasons and you can't upload files to your server easily; but good news is there are some tricks which can resolve it, for instance, you can use jquery AjaxForm in your mvc form easily with a bit little modification. Take a look at jquery-ajax-form and its samples, you will get some good idea around it.

Answer 2

Normally you cannot upload files using AJAX. Modern browsers that support FormData would allow you to directly make AJAX requests containing multipart/form-data content. Also look at the native XMLHttpRequest object.

But if you need to support legacy browsers you will need some fallback mechanism such as hidden iframes or Flash movies. Plugins such as blueimp would detect the browser capabilities and upload the file using the best option that the browser supports.