admin管理员组

文章数量:1415475

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;
}

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.

  • javascript
  • jquery
  • ajax
  • asp-core
  • image-uploading
Share Improve this question asked Aug 28, 2018 at 14:49 user5512248user5512248 2
  • 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

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]);

本文标签： javascriptUploading image to ASPNET Core app using AJAXStack Overflow

版权声明：本文标题：javascript - Uploading image to ASP.NET Core app using AJAX - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745147981a2644786.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。