How to get image from input field using jQuery

Question

I am trying to send image from an html page to Django view. But I am not able to attain the data. The following is my code.

<input type="file" id = "imageupload" onchange = "sendimg()" />

<script>
  var sendimg = function(){
    var img = document.getElementById("imageupload")
    $.ajax({
      type: "POST",
      url: "/test/",
      data: {
        "imgfile": img,
      },
      processData: false,
      contentType: false,
      success: function(data){
        console.log("success");
        console.log(data);
      },
      failure: function(data){
        console.log("failure");
        console.log(data);
      },
    });
  }
</script>

The Django view is

@csrf_exempt
def testimg(request):
  print "the request",request.POST
  data = {"data": "ok"}
  return JsonResponse(data)

The print statement gives

the request <QueryDict: {}>

What am I doing wrong ?

CristiC777 · Accepted Answer · 2017-10-30 14:04:43Z

0

please take a look on documenataion

and for Ajax see this answer

answered Oct 30, 2017 at 14:04

CristiC777

48111 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ahorak · Accepted Answer · 2017-10-30 14:09:45Z

0

Have you tried .val() to get contents of an input field? http://api.jquery.com/val/

answered Oct 30, 2017 at 14:09

ahorak

16310 bronze badges

Collectives™ on Stack Overflow

How to get image from input field using jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related