时间戳

首页 > 解决方案 > 如何使用 ajax 保存我在 POST 请求中获得的图像？

javascript - 如何使用 ajax 保存我在 POST 请求中获得的图像？

问题描述

我是 Django 的新手。我创建了一个用于识别的表单，其中包含两个用于上传图像的字段 - main_photo、profile_photo

我有一个上传图片的 Django 表单。ajax 在FormData()的帮助下（我可能和她一起工作错了），我将它们发送到一个函数POST request。但我无法存储它们。帮我。

模板

<input type="hidden" name="csrfmiddlewaretoken" value="9S6oPbkHujBnxaKHSxzU5W4mdkEs6Lbbf3g0OIJAk3lBfaMV8bafzpz8QudIuofJ">
  9S6oPbkHujBnxaKHSxzU5W4mdkEs6Lbbf3g0OIJAk3lBfaMV8bafzpz8QudIuofJ
    <div class="field inline">
        <div class="subhead"></div>

        <input type="file" name="main_photo" required="" id="id_main_photo">
        <label for="foto1" class="id_foto">
            <div class="addPhoto">
                <div class="button"></div>
            </div>
        </label>
    </div>
    <div class="field inline">
        <div class="subhead"></div>
        <input type="file" name="profile_photo" required="" id="id_profile_photo">
        <label for="foto2" class="id_foto">
            <div class="addPhoto">
                <div class="button"></div>
            </div>
        </label>
    </div>
    <div class="center">
      <button class="submit mgln" type="button"></button>
    </div>

jQuery

var token = '{{csrf_token}}';
$('.mgln').on('click', function(){

    photo = new FormData();
    photo.append('file1', $('input[name=main_photo]').prop('files')[0])
    photo.append('file2', $('input[name=profile_photo]').prop('files')[0])
    photo1 = photo.getAll('file1')
    photo2 = photo.getAll('file1')
  data = {
      photo1: photo1,
      photo2: photo2,
    }
    console.log(data)
    $.ajax({
      headers: { "X-CSRFToken": token },
      type: "POST",
      url: "{% url 'identification_view' %}",
      data: data,
      processData: false,
      contentType: false,
      success: function(result) {
        alert('Ok.');
      },
      error: function(result) {
        alert('Error.');
      }
    })
  })

意见

def identification_view(request):
    if request.method == 'POST':
        form = IdentificationForm(request.POST, request.FILES)
        if request.is_ajax():
            print(request.POST.values())      #[]
            print(request.FILES.values())     #[]
            return HttpResponse('image upload success')
    else:
        form = IdentificationForm()
    identifications  = RequestUser.objects.filter(user = request.user)

    return render(request, 'accounts/identification.html', {'form': form, 'identifications': identifications})

形式

class IdentificationForm(forms.ModelForm):
    class Meta:
        model = RequestUser
        fields = ('main_photo', 'profile_photo', )

    def clean_image(self):
        ...

    def clean_image2(self):
        ...

标签： javascriptjqueryajaxdjango

解决方案

看法

def identification_view(request):
    if request.method == 'POST':
        form = IdentificationForm(request.POST, request.FILES)
        if request.is_ajax():
            print(dir(request.FILES))
            main_photo = request.FILES.get('file1')
            profile_photo = request.FILES.get('file2')
            RequestUser.objects.create(
            user = request.user,
            main_photo = main_photo,
            profile_photo = profile_photo
            )
            return HttpResponse('image upload success')
    else:
        form = IdentificationForm()
    identifications  = RequestUser.objects.filter(user = request.user)

    return render(request, 'accounts/identification.html', {'form': form, 'identifications': identifications})

脚本

var token = '{{csrf_token}}';
$('.mgln').on('click', function(){
    formData = new FormData();
    formData.append('file1', $('input[name=main_photo]')[0].files[0])
    formData.append('file2', $('input[name=profile_photo]')[0].files[0])
    $.ajax({
      headers: { "X-CSRFToken": token },
      type: "POST",
      url: "{% url 'identification_view' %}",
      data: formData,
      processData: false,
      contentType: false,
      success: function(result) {
        alert('ok.');
      },
      error: function(result) {
        alert('error.');
      }
    })
  })

推荐阅读