Django inlineformset-jQuery添加行

编程问答 2022-06-05

问题描述

您好，我正在尝试通过inlineformset将多个图像上传到网络。 inlineformset工作正常，但是如果我添加功能以添加更多行来上传图像，则它仅上传原始图像，而不上传通过jQuery Add行添加的图像。我不确定为什么不接受...

Models.py 

class Postimage(models.Model):
    post = models.ForeignKey(
        Post,default=None,on_delete=models.CASCADE,related_name='postimages')

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = RichTextField(blank=True,null=True)

Views.py 

PostimageFormSet = inlineformset_factory(Post,Postimage,fields=['image','title'],exclude=['post'],max_num=30,extra=3,can_delete=True)
class PostCreateView(LoginrequiredMixin,CreateView):

    form_class = CreatePostForm
    template_name = 'blog/post_form.html'

    def get_context_data(self,*args,**kwargs):
        context = super(PostCreateView,self).get_context_data(**kwargs)
        if self.request.POST:
            context['formset'] = PostimageFormSet(self.request.POST,self.request.FILES,instance=self.object)
        else:
            context['formset'] = PostimageFormSet()
        return context
   def form_valid(request):
      ----

模板

<form id="myForm" method="POST" enctype="multipart/form-data">
   {% csrf_token %}
   {{ formset.management_form }}
            {% for form2 in formset.forms %}
                <div class="table">
                    <table class="no_error">
                        {{ form2|crispy }}
                    </table>
                </div>
                <hr>
            {% endfor %}
        </fieldset>
        <div class="form-group">
            <input class="btn btn btn-outline-primary btn-sm" type="button" value="Add Row" id="add_more">
            <button class="btn btn-outline-info float-right" type="submit">Post</button>
        </div>
  </form>

jQuery脚本：

  <script>
    $('#add_more').click(function() {
        cloneMore('div.table:last','service');
    });
</script>
<script>
function cloneMore(selector,type) {
    var newElement = $(selector).clone(true);
    var total = $("#id_" + type + "-TOTAL_FORMS").val();
    newElement.find(":input").each(function () {
        var name = $(this)
        .attr("name")
        .replace("-" + (total - 1) + "-","-" + total + "-");
        var name_split = name.split("-")
        console.log(name_split)
        var id_number = parseInt(name_split[name_split.length -2]) + 1
        var index = name_split.indexOf(name_split[name_split.length -2])
        if (index !== -1){
            name_split[index] = id_number.toString()
        }
        var new_name = name_split.toString().replace(',','-').replace(','-')
        var id = "id_" + new_name;
        $(this).attr({ name: new_name,id: id }).val("").removeAttr("checked");
    });
    newElement.find("label").each(function () {
        var newFor = $(this)
        .attr("for")
        .replace("-" + (total - 1) + "-","-" + total + "-");
        $(this).attr("for",newFor);
    });
    totaL++;
    $("#id_" + type + "-TOTAL_FORMS").val(total);
    $(selector).after(newElement);
}
    
</script>

有人知道为什么jQuery脚本不起作用吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

djangodjangoinline-formsetjquery