Question

I have a form in which user inputs its data along with its image. This form will be in a jquery dialog. I want to know if its is possible that if I upload an image and then send it to server for saving on hard drive after that without loosing that dialog print a message your file uploaded. If yes then how i can use jquery ajaxform plugin. Im using asp.net mvc.

What i have tried is as follows

My View

<div id="dialog" title="Dialog Title" style="display: none">
        <div id="Jobs">
        <form id="frmupload" enctype="multipart/form-data" method="post">
            <input id="File1" type="file" name="file" />
            <input id="Button1" type="submit" value="Upload" name="button" /> 
            </form>
        </div>
    </div>

My JQuery

function dialogs(id) {
        $(function () {
            var ph = $("#Jobs");           
                ph.dialog({
                    width: 700,
                    modal: true,
                    show: 'slide',
                    closeText: 'hide',
                    draggable: false,
                    resizable: false
                });
            //});
        });
    }

    function clik(id) {
        dialogs(id);
        return false;
    }
 var options = {
            url: "/Post/UploadImages"            
        };       

        $('#frmupload').ajaxForm(function (options) {
            //alert(data);
            alert("Thank you for your comment!");
        });

Answer 1

Check out the following example that uses an AJAX file upload (unfortunately, it looks like the JavaScript isn’t given):

http://jquery.malsup.com/form/#file-upload

Basically, you need to include the iframe property in your options object:

var options = {
    url: "/Post/UploadImages",
    iframe: true
}; 

The catch is that the plugin expects a response wrapped in <textarea></textarea> tags (because the response type must be HTML or XML). You can do this conveniently by introducing your own type of response for handling an AJAX file upload, as outlined in the blog post here:

public class FileUploadJsonResult : JsonResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        this.ContentType = "text/html";
        context.HttpContext.Response.Write("<textarea>");
        base.ExecuteResult(context);
        context.HttpContext.Response.Write("</textarea>");
    }
}

And then in your controller action:

return new FileUploadJsonResult { Data = new { /* ... */ } };