javascript - Uploading image to ASP.NET Core app using AJAX

I am new to jQuery and AJAX and I am trying to upload image to my server using it. I have a simple html page

<body>
<script src=".3.1/jquery.min.js"></script>
<script src="script.js"></script>
<form method="post" enctype="multipart/form-data">
    Select image to upload:
    <input id="profilePic" name="picture" type="file" size="1" onchange="uploadFile('profilePic');" />
</form>

where script file is

function uploadFile(inputId) {
var fileUpload = $("#" +inputId).get(0);
var files = fileUpload.files;
var formData = new FormData();
formData.append(files[0].name, files[0]);

$.ajax({
    url: '/Image/File',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (result) {
    }
});

In my controller named ImageController I have a POST method named File which takes zero arguments:

[HttpPost]
public IActionResult File()
{
    var file = Request.Form.Files[0];

    if (file != null)
    {
        //work
    }

    return null;
}

but everytime I submit an image to form nothing happens and I get code 500: internal server error, failed to load resource. I have placed breakpoints in my code but it never entered the File method. What am I doing wrong? htmlpage and script are located in wwwroot, controller is in Controllers folder.

I am new to jQuery and AJAX and I am trying to upload image to my server using it. I have a simple html page

<body>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
<form method="post" enctype="multipart/form-data">
    Select image to upload:
    <input id="profilePic" name="picture" type="file" size="1" onchange="uploadFile('profilePic');" />
</form>

where script file is

function uploadFile(inputId) {
var fileUpload = $("#" +inputId).get(0);
var files = fileUpload.files;
var formData = new FormData();
formData.append(files[0].name, files[0]);

$.ajax({
    url: '/Image/File',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (result) {
    }
});

In my controller named ImageController I have a POST method named File which takes zero arguments:

[HttpPost]
public IActionResult File()
{
    var file = Request.Form.Files[0];

    if (file != null)
    {
        //work
    }

    return null;
}

Share Improve this question asked Aug 28, 2018 at 14:49 user5512248

If you check the Message of the exception raised which causes the 500 error it will tell you the exact cause and also the line of code which is raising that exception. You should check that. – Rory McCrossan Commented Aug 28, 2018 at 14:50
All Google Chrome says is: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Image/File:1 – user5512248 Commented Aug 28, 2018 at 14:53

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

First, your action should take the image as a param:

// Don't use `File` here. You're hiding the base `File` method.
public IActionResult FileUpload(IFormFile file)
{
    // Always check content length
    if (file?.ContentLength > 0)
    {
        //work
    }

    return null;
}

Then, in your JS, the first param to FormData.append should be data name, not the name of the file. Since the action param is file, the name here should be file as well:

formData.append('file', files[0]);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uploading image to ASP.NET Core app using AJAX - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)