ஜாங்கோவில் "படம் வழங்கப்படவில்லை" பிழை மற்றும் 400 31 பதிலைச் சரிசெய்ய jQuery AJAX ஐப் பயன்படுத்துதல்

ஜாங்கோ மற்றும் jQuery இல் படப் பதிவேற்றங்களைச் சரிசெய்தல்

ஜாங்கோ மற்றும் jQuery மூலம் இணையப் பயன்பாட்டை உருவாக்கும்போது, ​​படங்கள் போன்ற கோப்பு பதிவேற்றங்களைக் கையாள்வது சில நேரங்களில் சவால்களை ஏற்படுத்தலாம். டெவலப்பர்கள் சந்திக்கும் ஒரு பொதுவான சிக்கல் AJAX கோரிக்கையின் மூலம் ஒரு படத்தை பதிவேற்ற முயற்சிக்கும்போது சர்வர் பிழைகள் திரும்பும். இந்தப் பிழைகள் வெறுப்பாக இருக்கலாம், குறிப்பாக முன்பக்கம் சரியாக வேலை செய்வதாகத் தோன்றும் போது, ​​ஆனால் பின்தளமானது கோப்பைச் செயலாக்க மறுக்கிறது.

இந்தச் சிக்கல் அடிக்கடி HTTP 400 மறுமொழியாக "படம் எதுவும் வழங்கப்படவில்லை" போன்ற செய்திகளுடன் வெளிப்படுகிறது, இதனால் டெவலப்பர்கள் என்ன தவறு என்று யோசிக்கிறார்கள். இந்த வழக்கில், ஃபிரண்ட்டெண்ட் படத் தரவை எவ்வாறு சேவையகத்திற்கு அனுப்புகிறது என்பதில் சிக்கல் உள்ளது. மென்மையான கோப்பு கையாளுதலுக்கு முன் மற்றும் பின்தளத்திற்கு இடையே சரியான தொடர்பை உறுதி செய்வது அவசியம்.

இந்தக் கட்டுரையில், "படம் எதுவும் வழங்கப்படவில்லை" என்ற பிழை மற்றும் ஜாங்கோவில் 400 31 மறுமொழி குறியீடு காரணமாக AJAX வழியாகப் பதிவேற்றம் தோல்வியடையும் நிஜ உலகக் காட்சியை ஆராய்வோம். மூல காரணத்தை அடையாளம் காணவும், சிக்கலைச் சரிசெய்வதற்கான தீர்வுகளை முன்வைக்கவும் முன்பக்கம் மற்றும் பின்தளக் குறியீட்டை மதிப்பாய்வு செய்வோம்.

இந்த வழிகாட்டியின் முடிவில், jQuery ஐப் பயன்படுத்தி ஜாங்கோ சேவையகத்திற்கு படக் கோப்புகளை எவ்வாறு சரியாக அனுப்புவது என்பது பற்றிய தெளிவான புரிதலை நீங்கள் பெறுவீர்கள், உங்கள் கோப்பு பதிவேற்ற கோரிக்கைகள் பிழையின்றி வெற்றிகரமாக செயலாக்கப்படுவதை உறுதிசெய்கிறது.

கட்டளை	பயன்பாட்டின் உதாரணம்
FormData()	இந்தக் கட்டளை ஒரு புதிய FormData பொருளை உருவாக்குகிறது, இது படங்களைப் போன்ற கோப்புகள் உட்பட அஜாக்ஸ் மூலம் தரவை அனுப்ப விசை/மதிப்பு ஜோடிகளின் தொகுப்பை எளிதாக உருவாக்க உங்களை அனுமதிக்கிறது. கோப்பு பதிவேற்றங்களைக் கையாளும் போது இது மிகவும் முக்கியமானது, ஏனெனில் இது பரிமாற்றத்திற்கான தரவை சரியாக வடிவமைக்கிறது.
processData: false	jQuery இன் AJAX அமைப்புகளில், அனுப்பப்படும் தரவு செயலாக்கப்படாமல் அல்லது வினவல் சரமாக மாற்றப்படாமல் இருப்பதை இந்தக் கட்டளை உறுதி செய்கிறது. FormData ஆப்ஜெக்ட்களை அனுப்பும் போது இது மிகவும் முக்கியமானது, ஏனெனில் அவை கோப்புகளை உள்ளடக்கியது, அவை அவற்றின் மூல வடிவத்தில் அனுப்பப்பட வேண்டும்.
contentType: false	உள்ளடக்க வகை தலைப்பை தானாக அமைக்க வேண்டாம் என்று இது சேவையகத்தை கூறுகிறது. கோப்புகளைப் பதிவேற்றும் போது இது அவசியம், ஏனெனில் கோப்புத் தரவை அனுப்ப உலாவியானது சரியான மல்டிபார்ட் படிவம்-தரவு உள்ளடக்க வகை எல்லையை உருவாக்க வேண்டும்.
request.FILES	ஜாங்கோவில், request.FILES என்பது, பதிவேற்றிய கோப்புகள் அனைத்தையும் உள்ளடக்கிய அகராதி போன்ற பொருளாகும். கோப்பு பதிவேற்றங்களைக் கையாளுவதற்கு இது முக்கியமானது, ஏனெனில் இது கிளையன்ட் பக்கத்திலிருந்து அனுப்பப்படும் படம் அல்லது ஆவணக் கோப்புகளை அணுக அனுமதிக்கிறது.
SimpleUploadedFile()	கோப்பு பதிவேற்றங்களை உருவகப்படுத்த ஜாங்கோவின் சோதனை கட்டமைப்பில் இது பயன்படுத்தப்படுகிறது. இது ஒரு உண்மையான கோப்பு பதிவேற்றத்தை பிரதிபலிக்கும் ஒரு எளிய கோப்பு பொருளை உருவாக்குகிறது, இது பட பதிவேற்றங்கள் போன்ற கோப்பு கையாளும் காட்சிகளுக்கான யூனிட் சோதனைகளை எழுத டெவலப்பர்களை அனுமதிக்கிறது.
JsonResponse()	JSON-வடிவமைக்கப்பட்ட HTTP பதில்களை வழங்குவதற்கான ஜாங்கோ முறை. இந்தச் சூழலில், பிழைச் செய்திகள் அல்லது வெற்றித் தரவை கிளையண்டிற்கு மீண்டும் அனுப்ப இது பயன்படுகிறது, குறிப்பாக JSON தரவை எதிர்பார்க்கும் AJAX கோரிக்கைகளுக்குப் பயன்படுகிறது.
@csrf_exempt	ஜாங்கோவில் உள்ள இந்த அலங்காரமானது CSRF பாதுகாப்பு பொறிமுறையிலிருந்து ஒரு பார்வைக்கு விலக்கு அளிக்கப் பயன்படுகிறது. விரைவான வளர்ச்சி அல்லது சோதனையின் போது இது பயனுள்ளதாக இருக்கும் போது, ​​இது எச்சரிக்கையுடன் பயன்படுத்தப்பட வேண்டும், ஏனெனில் இது பயன்பாட்டை பாதுகாப்பு அபாயங்களுக்கு வெளிப்படுத்தலாம்.
readAsDataURL()	FileReader API இலிருந்து ஒரு ஜாவாஸ்கிரிப்ட் முறை, இது ஒரு கோப்பின் உள்ளடக்கங்களைப் படித்து அதை அடிப்படை64 தரவு URL ஆக குறியாக்கம் செய்கிறது. படத்தை சர்வருக்கு அனுப்பும் முன் கிளையன்ட் பக்கத்தில் காட்ட இது பயன்படுகிறது.
append()	FormData ஆப்ஜெக்டில் உள்ள இந்த முறை படிவத் தரவில் விசை/மதிப்பு ஜோடிகளைச் சேர்க்க அனுமதிக்கிறது. AJAX வழியாக அனுப்பும் முன் படிவத்தில் படக் கோப்பைச் சேர்க்கும் போது, ​​கோப்புகளை இணைக்க இது அவசியம்.

ஜாங்கோவில் அஜாக்ஸ் படப் பதிவேற்ற செயல்முறையைப் புரிந்துகொள்வது

மேலே கொடுக்கப்பட்டுள்ள ஸ்கிரிப்ட்கள், அஜாக்ஸ் வழியாக ஒரு படத்தை மேலும் செயலாக்கத்திற்காக ஜாங்கோ பின்தளத்தில் பதிவேற்றும்போது பொதுவான சிக்கலைச் சமாளிக்கும். CSRF பாதுகாப்பு போன்ற முறையான பாதுகாப்பு நடவடிக்கைகளை உறுதி செய்யும் அதே வேளையில், கோப்புத் தரவை சரியான வடிவமைப்பில் சேவையகத்திற்கு அனுப்புவதே இங்குள்ள முக்கிய சவாலாகும். முன்பக்கம் பயன்படுத்துகிறது படப் பதிவேற்றத்தைக் கையாள. படம் ஒரு உள்ளீட்டு உறுப்பிலிருந்து தேர்ந்தெடுக்கப்பட்டது, மற்றும் பட முன்னோட்டத்தை பயனருக்குக் காண்பிக்க API பயன்படுத்தப்படுகிறது. படத்தைச் செயலாக்குவதற்கு முன், வலைப்பக்கத்தில் படத்தைக் காண்பிப்பதன் மூலம் இது மிகவும் ஊடாடும் பயனர் அனுபவத்தை உருவாக்குகிறது.

படத்தைத் தேர்ந்தெடுத்த பிறகு, படத்தைச் செயலாக்க பயனர் ஒரு பொத்தானைக் கிளிக் செய்யலாம். இந்த கட்டத்தில், jQuery செயல்பாடு படத்தை ஜாங்கோ பின்தளத்திற்கு அனுப்புகிறது. பட கோப்பு பெயரை அனுப்புவதற்கு பதிலாக, ஸ்கிரிப்ட் இப்போது பயன்படுத்துகிறது CSRF டோக்கன் உட்பட, பிற தேவையான படிவத் தரவுகளுடன் உண்மையான கோப்பைச் சேர்க்க. தி மற்றும் உள்ளடக்க வகை: தவறான AJAX கோரிக்கையில் உள்ள அமைப்புகள், தரவு வினவல் சரமாக மாற்றப்படாமல் இருப்பதை உறுதிசெய்கிறது, இது கோப்புகளை சர்வருக்கு சரியாக அனுப்புவதற்கு அவசியம்.

பின்தளத்தில், ஜாங்கோ காட்சி பயன்படுத்துகிறது பதிவேற்றிய படத்தை அணுக. இந்த ஆப்ஜெக்ட் ஒரு படிவத்தின் மூலம் பதிவேற்றப்பட்ட அனைத்து கோப்புகளையும் சேமிக்கிறது. படம் இருக்கிறதா எனச் சரிபார்த்து, இயந்திரக் கற்றல் மாதிரியைப் பயன்படுத்தி அதைச் செயலாக்குகிறது. படம் விடுபட்டால், சேவையகம் "படம் வழங்கப்படவில்லை" என்ற பிழை செய்தியுடன் பதிலளிக்கிறது, இது 400 நிலைக் குறியீட்டைத் தூண்டுகிறது. இது தவறான அல்லது வெற்று கோரிக்கைகள் சரியாக கையாளப்படுவதை உறுதிசெய்கிறது, மேலும் பாதுகாப்பான மற்றும் வலுவான API தகவல்தொடர்புக்கு பங்களிக்கிறது.

ஸ்கிரிப்டுகள் பிழை பதிவு மற்றும் பதில் கையாளுதல் ஆகியவற்றைக் கையாளுகின்றன . படம் வெற்றிகரமாக செயலாக்கப்பட்டால், 200 நிலைக் குறியீடு வழங்கப்படும். செயலாக்கத்தின் போது ஏதேனும் தவறு நடந்தால், 500 நிலைக் குறியீட்டுடன் பிழைச் செய்தி அனுப்பப்படும். கூடுதலாக, சோதனை தொகுப்பு ஸ்கிரிப்ட் பயன்படுத்துகிறது அலகு சோதனையின் போது கோப்பு பதிவேற்றங்களை உருவகப்படுத்த. வெவ்வேறு சூழல்களில் படக் கோப்புகளை பார்வை சரியாகக் கையாளுகிறது என்பதைச் சரிபார்க்க இது உதவுகிறது, முழு ஓட்டமும் பல்வேறு காட்சிகள் மற்றும் தளங்களில் எதிர்பார்த்தபடி செயல்படுவதை உறுதி செய்கிறது.

// jQuery Script with FormData to send the image correctly
$(document).ready(() => {
    $("input[id='image']").on('change', function(event) {
        let input = this;
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#banner').css('width', '350px')
            $('#banner').addClass('img-thumbnail')
            $('#banner').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    });

    $('#process').click(() => {
        let image = $('#image').prop('files')[0];
        let formData = new FormData();
        formData.append('image', image);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

        $.ajax({
            url: "/api/",
            type: "POST",
            data: formData,
            processData: false,  // Required for FormData
            contentType: false,  // Required for FormData
            success: function(xhr) {
                alert("Image processed successfully!");
            },
            error: function(xhr) {
                console.log(xhr.responseText);
                alert("Error occurred while processing the image.");
            }
        });
    });
});

from django.shortcuts import render
from django.http import JsonResponse, HttpResponse
from django.views.decorators.csrf import csrf_exempt
from diab_retina_app import process

@csrf_exempt
def process_image(request):
    if request.method == 'POST':
        img = request.FILES.get('image')
        if img is None:
            return JsonResponse({'error': 'No image provided.'}, status=400)

        try:
            response = process.process_img(img)
            return HttpResponse(response, status=200)
        except ValueError as e:
            return JsonResponse({'error': str(e)}, status=500)

from django.test import TestCase, Client
from django.core.files.uploadedfile import SimpleUploadedFile

class ImageUploadTest(TestCase):
    def setUp(self):
        self.client = Client()

    def test_image_upload(self):
        # Create a fake image for testing
        img = SimpleUploadedFile("test_image.jpg", b"file_content", content_type="image/jpeg")

        response = self.client.post('/api/', {'image': img}, format='multipart')

        self.assertEqual(response.status_code, 200)
        self.assertIn("Result", response.content.decode())

AJAX மற்றும் Django இல் கோப்பு பதிவேற்றச் சிக்கல்களைத் தீர்க்கிறது

பல வலை பயன்பாடுகளில், குறிப்பாக இயந்திர கற்றல் மாதிரிகளை ஒருங்கிணைக்கும், கோப்பு பதிவேற்றங்கள் பொதுவானவை. டெவலப்பர்கள் எதிர்கொள்ளும் ஒரு சவால் படம் அல்லது கோப்பு கிளையண்டிலிருந்து சர்வருக்கு சரியாக அனுப்பப்படுவதை உறுதி செய்வதாகும். இது கையாளுதலை உள்ளடக்கியது திறம்பட கோருகிறது, சர்வர் செயலாக்கக்கூடிய வகையில் கோப்புகள் அனுப்பப்படுவதை உறுதி செய்கிறது. இந்த ஓட்டத்தில் ஒரு முக்கியமான காரணி படக் கோப்புகளை அனுப்புவதற்கு சரியான வடிவமைப்பைப் பயன்படுத்துவதாகும். தி ஆப்ஜெக்ட் இன்றியமையாத பங்கை வகிக்கிறது, ஜாங்கோவில் உள்ள CSRF டோக்கன் போன்ற பிற தரவுகளுடன் கோப்புகளை இணைக்கவும் தடையின்றி அனுப்பவும் அனுமதிக்கிறது.

ஜாங்கோ சுற்றுச்சூழல் அமைப்பில் உள்ள முன் மற்றும் பின்பகுதி கூறுகளுக்கு இடையேயான தொடர்பு புரிந்து கொள்ள வேண்டிய மற்றொரு முக்கிய அம்சமாகும். சர்வருக்கு ஒரு படத்தை அனுப்ப AJAX ஐப் பயன்படுத்தும் போது, ​​தரவு ஒரு வினவல் சரத்தில் குறியாக்கம் செய்யப்படவில்லை என்பதை முன்பக்கம் உறுதி செய்ய வேண்டும், இது கோப்பு பதிவேற்றத்தை உடைக்கக்கூடும். ஜாங்கோ பக்கத்தில், தி பதிவேற்றிய கோப்பை அகராதி சரியாகப் பிடிக்க வேண்டும். டெவலப்பர்கள் செய்யும் பொதுவான தவறு, AJAX அழைப்பில் பொருத்தமான தலைப்புகள் அல்லது உள்ளமைவுகளை அமைக்காதது, "படம் எதுவும் வழங்கப்படவில்லை" போன்ற பிழைகளுக்கு வழிவகுக்கும்.

மேலும், முகப்பு மற்றும் பின்தளம் இரண்டிலும் பிழை கையாளுதலை மேம்படுத்துவது மென்மையான பயனர் அனுபவத்தை உறுதிப்படுத்த உதவுகிறது. பிழைகளை சரியாகப் பிடிப்பது மற்றும் பதிவு செய்வது, பிழைகளை சரிசெய்து சிக்கலைத் திறம்பட தீர்க்க அனுமதிக்கிறது. முழுமையான சோதனையைச் செயல்படுத்துவதன் மூலம், குறிப்பாக போன்ற கருவிகள் மூலம் ஜாங்கோவின் சோதனைத் தொகுப்பில், டெவலப்பர்கள் தங்கள் கோப்பு பதிவேற்ற செயல்பாட்டைச் சரிபார்த்து, வெவ்வேறு சூழல்களிலும் காட்சிகளிலும் கணினி சரியாகச் செயல்படுவதை உறுதிசெய்ய முடியும். இந்த அணுகுமுறை செயல்திறன் மற்றும் நம்பகத்தன்மையை மேம்படுத்துகிறது, குறிப்பாக பெரிய படங்கள் அல்லது தரவு கோப்புகளை செயலாக்கும் பயன்பாடுகளுக்கு.

1. நான் ஏன் "படம் வழங்கப்படவில்லை" என்ற பிழையைப் பெறுகிறேன்?
2. படம் சரியாக இணைக்கப்படாததே மிகவும் பொதுவான காரணம் AJAX கோரிக்கையில் உள்ள பொருள். பயன்படுத்துவதை உறுதி செய்யவும் படக் கோப்பைச் சேர்க்க.
3. என்ன ஜாங்கோவில்?
4. ஜாங்கோவில் உள்ள ஒரு அகராதி, இது ஒரு படிவத்தின் மூலம் பதிவேற்றப்பட்ட அனைத்து கோப்புகளையும் வைத்திருக்கும், பின்தளத்தில் கோப்புகளை செயலாக்க அனுமதிக்கிறது.
5. அஜாக்ஸ் கோரிக்கையில் கோப்பை எவ்வாறு இணைப்பது?
6. நீங்கள் உருவாக்க வேண்டும் பொருள் மற்றும் பயன்படுத்தவும் AJAX மூலம் கோப்பு அனுப்பும் முன் அதை சேர்க்கும் முறை.
7. எனக்கு ஏன் தேவை AJAX இல்?
8. AJAX கோரிக்கையில் அனுப்பப்பட்ட தரவு வினவல் சரமாக செயலாக்கப்படவில்லை என்பதை உறுதிசெய்கிறது, இது கோப்பு பதிவேற்றங்களுக்கு முக்கியமானது.
9. ஜாங்கோவில் படப் பதிவேற்றங்களை எவ்வாறு சோதிப்பது?
10. நீங்கள் ஜாங்கோவின் சோதனைக் கட்டமைப்பைப் பயன்படுத்தலாம் கோப்பு பதிவேற்றங்களை உருவகப்படுத்தவும் மற்றும் பின்தள தர்க்கத்தை சரிபார்க்கவும்.

ஜாங்கோவில் AJAX மூலம் படப் பதிவேற்றங்களைக் கையாளும் போது, ​​படிவத் தரவின் ஒரு பகுதியாக முன்பக்கம் சரியாகப் படத்தை அனுப்புவதை உறுதி செய்வது மிகவும் அவசியம். பயன்படுத்தி கோப்புகளை சரங்களாக மாற்றாமல் சரியாக அனுப்ப அனுமதிக்கிறது, காணாமல் போன படங்களின் சிக்கலை தீர்க்கிறது.

பின்தளத்தில், ஜாங்கோவின் பதிவேற்றிய கோப்பை மீட்டெடுக்க பயன்படுத்த வேண்டும். பிழைத்திருத்தம் இன்றியமையாதது, மேலும் கோப்பு கையாளுதல் செயல்முறையில் கவனமாக கவனம் செலுத்துவதன் மூலம் பெரும்பாலான பிழைகளைத் தீர்க்க முடியும், இதனால் 400 பிழைகள் இல்லாமல் எதிர்பார்த்தபடி படத்தைப் பதிவேற்றம் செய்து செயலாக்க முடியும்.