Question

我刚刚上传了一个简单的表单：

def post(request):    
    if request.user.is_authenticated():
        form_post = PostForm(request.POST or None, request.FILES or None)
        if form_post.is_valid():
            instance = form_post.save(commit=False)
            instance.user = request.user

            instance.save()

            return HttpResponseRedirect('/home/')
        else:
            form_post = PostForm()

        context = {
            'form_post': form_post,
        }
        return render(request, 'post/post.html', context)
    else:
        return HttpResponseRedirect("/accounts/signup/")

源自此处：

class PostForm(forms.ModelForm):

    class Meta:
        model = Post
        fields = [
            'title',
            'image',
            'user'
        ]

这是模特：

class Post(models.Model):
    user = models.ForeignKey(User, blank=True, null=True)
    title = models.TextField(max_length=95)
    image = models.FileField(null=True, blank=True)

当用户将图像添加到表单时，它会触发此JS函数：

$('input#id_image').on('change', function(e) {...}

可以预览图像。这就是我希望将图像上传到我的媒体文件夹目录（我正在使用S3存储）的地方。默认情况下，用户提交表单时会上传图片，但我希望在$('input#id_image').on('change'触发后立即上传图片。

我该怎么做？

Answer 1

只需将您的表单作为ajax请求发送到您的onChange处理程序：

$('input#id_image').on('change', function(e) {
        $.ajax({
            url: "your endpoint here",
            type: "POST",
            data: new FormData($(form#yourFormID)[0])             
        }).done(function(data) {
           //on success code
        }).fail(function(data, err) {
           //on fail code
        }).always(function() {
           //whatever to be done no matter if success or error
        });

}

在AJAX期间而不是在提交表单时将文件上载到媒体文件夹

1 个答案: