How to upload image using ajax in asp.net mvc

Question

Hi guys how can i upload image using AJAX in ASP.NET MVC

Answer 1

you have two options

1) pass a base64 string as part of a json payload.

2) use the FormData object as the post content

<form id="form">  
   <input type="file" id="file" name="file">  
   <button type="button">Upload</button>  
</form>  

<script>  
    if (!document.getElementById("file"))  
    {  
          alert("Select File first");  
          return;  
    }  
    var url = "/postfile";  
    var data = new FormData(document.getElementById("form"));  
    fetch(url, {  
        method: "POST",  
        data: data  
    });  
</script>  

.

Answer 2

Hi @Ram ,

how can i upload image using AJAX in ASP.NET MVC

If your application is a .NET Framework application, such as .NET 4.7.2 API application, you could refer the following sample code:

Index.html: 212329-index.txt

Home controller: 212259-homecontroller.txt

Then, the image will upload to the Uploads folder:

If your application is an Asp.net core application, you can check the following code:

Index.cshtml: 212287-core-index.txt

Home controller: 212309-homecontroller.txt

Then, the image was upload to the wwwroot\upload folder:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion