如何使用ASP.NET MVC4在单击时使用jquery在不使用任何形式的情况下上载文本框中的图像和文本

Question

View code

    <input type="text" id="txtImageName"></input>
    <input type="text" id="txtImageDescription"></input>
    <input type="file" id="txtImageName"></input>
    <input type="button" id="btnUpload" Value="Upload">

Jquery Code

<script>
        $('#btnUpload').click(function () {       
                var file = $("#txtImageName").get(0).files;
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("HomeAddNew", "Admin")",
                    data:
                    {
                        ImageName: $('#txtImageNameoption').val(),
                        ImageDescription:$('#txtImageDescription').val(),                   
                        Image: file
                    },
                    success: function (data) {
                        alert('hai');
                    },
                    error: function (data) {
                        alert('error');
                    }
                });
        });
    </script>

Controller code

public ActionResult HomeAddNew(string ImageName, string ImageDescription, HttpPostedFileBase Image)
        {
            //in the above HttpPostedFilebase I'm getting the null value but, I don't want to use .fileupload method or formdata class in jquery. 
            return View();
        }

Explanation : Whenever I check the file in controller method it is showing as null . Please send me the perfect solution for this. It will help me a lot. My email id is ganesh@concai.co.uk

Answer 1

You can't upload a file with ajax. If your browser requirements starts from IE10 then you can use xhr .

Code and information about how you should do it HERE .

Also, there's a plugin called FileAPI , which you can find HERE

Simple demo with progress bar

function startUpload() {
var fileInput = document.getElementById("fileInput");

if (fileInput.files.length == 0) {
    alert("Please choose a file");
    return;
}

var progressBar = document.getElementById("progressBar");
var xhr = new XMLHttpRequest();

xhr.upload.onprogress = function(e) {
    var percentComplete = (e.loaded / e.total) * 100;
    progressBar.value = percentComplete;
};

xhr.onload = function() {
    if (xhr.status == 200) {
        alert("Sucess! Upload completed");
    } else {
        alert("Error! Upload failed");
    }
};
xhr.onerror = function() {
    alert("Error! Upload failed. Can not connect to server.");
};

progressBar.value = 0;
xhr.open("POST", "ajax-upload", true);
xhr.setRequestHeader("Content-Type", fileInput.files[0].type);
xhr.send(fileInput.files[0]);
}