無法上傳多張圖片djago-ajax

我正在嘗試使用 ajax 請求上傳多張圖片，我正在使用modelformset_factory上傳多張圖片，這是我的代碼：

class Document(models.Model):
    booking =models.ForeignKey(Booking,on_delete=models.PROTECT)
    docs = models.ImageField(upload_to=upload_docs)

我的表格.py

class UploadDocumentsForm(forms.ModelForm):
    class Meta:
       model = Document
       fields = ['docs']

我的意見.py

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.is_ajax() and request.method == 'POST':
        images = UploadDocumentFormSet(request.POST,request.FILES)
        if images.is_valid():            
            for img in images:
                if img.is_valid() and img.cleaned_data !={}:
                    img_post = img.save(commit=False)
                    img_post.booking = obj
                    img_post.save()
            return JsonResponse({'success':'success'})
        else:
            messages.error(request,_('error message'))

    images = UploadDocumentFormSet(queryset=Document.objects.none())
        
    return render(request,'booking/add_img.html',{'obj':obj,'images':images})

這是我的模板，包括 html 和 ajax

$('#addButton').click(function() {
     var form_dex1 = $('#id_form-TOTAL_FORMS').val();
        $('#images').append($('#formset').html().replace(/__prefix__/g,form_dex1));
    $('#id_form-TOTAL_FORMS').val(parseInt(form_dex1)   1);    
        
 });   
    
    
const formData = new FormData()
    formData.append('csrf',document.getElementsByName('csrfmiddlewaretoken').value);
    formData.append('docs0',document.getElementById('id_form-0-docs').files[0]);
    formData.append('docs1',document.getElementById('id_form-1-docs').files[0]);
    formData.append('docs2',document.getElementById('id_form-2-docs').files[0]);
    formData.append('docs3',document.getElementById('id_form-3-docs').files[0]);

    const form = document.getElementById('docs-uploader-form')
    form.addEventListener("submit",submitHanler);
    function submitHanler(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:"{% url 'booking:add_new_image' id=2222 %}".replace(/2222/,parseInt({{obj.id}})),
            data:formData,
            dataType:'json',
            success:successFunction,
                        
        })        
    }
    function successFunction(data){
        // console.log(data)
            form.reset();
            alertify.success('added new image')

    } 

<button id="addButton" class="px-4 py-1 pb-2 text-white focus:outline-none header rounded-xl">
            {% trans "add new image" %}
 </button>  
<form action="" method="POST" enctype="multipart/form-data" dir="ltr" id="docs-uploader-form">{% csrf_token %}
                {% for form in images.forms %}
                {{form.id}}          
                {{images.management_form}}
                <div class="form-group mt-3" id="images">
                    {{ form.docs | add_class:'form-control-file' }}
                </div>
               
                {% endfor %}
                <div class="form-group mt-3" id="formset" style="display: none;">
                    {{ images.empty_form.docs | add_class:'form-control-file' }}
            
                </div>
            
                <button class="header pt-2  text-white px-4 p-1 rounded-lg mt-4">{% trans "submit" %}</button>
            </form>

有什么我必須改變的嗎，或者沒有更好的方法來實作它嗎？先感謝您 。我非常感謝你的幫助..

uj5u.com熱心網友回復：

你必須得到這樣的檔案：

  images = request.FILES.getlist('images')
  for image in images:
      photo = Photo(
          name='test',
          image=image,
      )
      photo.save()

  

uj5u.com熱心網友回復：

在您的 ajax 代碼中，您沒有將 contentType 和 processData 設定為 false，當您將 FormData 物件與 jQuery.ajax 一起使用時需要這樣做

$.ajax({
    type:'POST',
    url:"{% url 'booking:add_new_image' id=2222 %}".replace(/2222/,parseInt({{obj.id}})),
    data:formData,
    dataType:'json',
    processData: false,
    contentType: false,
    success:successFunction
                
});      

標籤：javascript 查询 姜戈 阿贾克斯

上一篇：如何在tkinterpython中從任務欄移除gui的圖示

下一篇：在我的AJAX中包含我的“檢查電子郵件是否有效”功能