Contoh Sederhana Upload File Image Django JQuery

Publish on May 16, 2022 by Alfin F

Informa Tempat Sampah 30 Ltr Stainless Slow Close - Silver

Tempat sampah pedal persembahan dari Informa ini akan menjadi perlatan rumah tangga yang mampu menjaga rumah terbebas dari sampah. Dioperasikan dengan menggunakan pedal injak agar tangan tetap higienis saat membuang sampah. Selain itu, tempat sampah ini dilengkapi dengan tutup soft close (menutup perlahan) sehingga tidak menimbulkan bunyi saat menutup.

Free Klik Disini !

Proses upload data biasanya menggunakan FORM yang di submit dengan tipe POST, cara ini tentunya mudah untuk di lakukan karena tidak memerlukan proses pengiriman data melalaui Ajax.

Misal kita punya sebuah form input :

<form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="filetest" id="filetest">
<input type="button" value="save" onclick="doUpload()">
</form>

Form input yang sudah kita buat, datanya akan dikirimkan ke backend melalui JQuery POST.

function doUpload(){
  filetest = $('#filetest')[0].files[0]
  formData = new FormData();
  formData.append('filetest', filetest);

  $.ajax({
    url : "/xxx/upload-test",
        type: "POST",
        data: formData,
        contentType : false,
        processData : false,
        headers: {
            'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value
        },
        success: function(data){
          console.log(data.message);
        }
  });
}

Setelah membuat kode sederhana dengan JQuery, buat juga fungsi di python untuk menerima file image yang dikirm ke backend.

import json
from from django.http import HttpResponse
def doUpload(request):
    response = {}
    if request.POST:
        testfile = request.FILES.get('testfile')
        #todo action .......
        response = {
            'message':'success'
        }
    return HttpResponse(json.dumps(response), content_type="application/json")