Question

我正在做一个页面网站，我想在其中输入一些文本并上传文件。基本上，我希望我的表单在前端看起来像是，首先，我可以在给定的文本区域中键入一些文本，在下面，我应该能够选择多个文件，一旦选择了文件，我将点击上传按钮，应该上传文件，然后点击“提交”，这就是我创建帖子的方式。

我在下面附上我的代码。我确实已经写了损坏的views.py文件，但现在暂时不附加。

models.py :
class Post(models.Model): 
    post_body = models.TextField(blank=False, max_length=500)   

class PostMedia(models.Model): 
    file = models.FileField()
    body = models.ForeignKey(Post, on_delete=models.CASCADE)

forms.py :

from django.forms import ClearableFileInput
from django.forms import ModelForm
from .models import Post, PostMedia


class PostModelForm(ModelForm):
    class Meta:
        model = Post
        fields = ['post_body']


class PostMediaModelForm(ModelForm):
    class Meta:
        model = PostMedia
        fields = ['file']
        widgets = {
            'file': ClearableFileInput(attrs={'multiple': True}),

form.html (I was trying to write the jquery function):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    $('text-form').on('submit',upload(e) {
          e.preventDefault();
          $.post( '../create-post', $('form').serialize(), function( data ) {
               alert( data );
          } );
    });
</script>
    <div class="site-form">
        <h2>Create a New Post here! </h2>
        <form action="." method="post" name="text-form">
            {% csrf_token %}
            {{ form }}
            <br><br>

            <form action="." method="post" name="file-form" enctype="multipart/form-data" data-ajax="false">
                {% csrf_token %}
                {{ file_form }}
                <br><br>
                <input type="submit" value="Upload files" onclick="upload(); return false;"/>
                <br><br>
                <input type="submit" value="Create post"/>
            </form>

        </form>
    </div>

urls.py

 url(r'^/create-post', upload_files, name='create-post'),
 url(r'^/submit-post', submit_post, name='submit-post'),

现在，我希望当我单击“上传”按钮时，我应该停留在同一页面上，但在后台，views.py应该实际上保存了所选文件（考虑到我无法保存除非，直到我保存外键的文本bcz），然后单击提交按钮以保存帖子。

我该如何实现？仅仅给出工作流程也将不胜感激。我不了解jquery或ajax，我猜它们在这里起到了作用。

Answer 1

好吧，我想我可以帮助您使用javascript

<button onclick="upload(); return false;">Upload files<button/>

<input type="submit" id="create_post_button" value="Create post"/>

在第一个脚本标签内添加

$(function() {
     $("#create_post_button").hide();
 });

如果您不希望在上传文件之前显示“创建帖子”按钮。

然后使用上传功能

function upload(){ event.preventDefault(); 
data = new FormData();
data.append( 'file', $( '#file' )[0].files[0] );
//files if is multiple
//is necessaty add an id to make it easier but you can access to the html element with $(input[name='inputname']) if you want to keep wht input type button

$.ajax({
    url: 'url to post',
    data: data,
    processData: false,
    type: 'POST',
    success: function ( data ) {
       $("#create_post_button").show();   

   }
});}

我建议您输入的文件是否不应该放在表单内，例如将其从关闭表单的标签下移开，因为如果不这样，您将两次发送该文件，则没有必要。如果您只想在有文件的情况下，则可以上传所有表格，我建议您这样做

向表单添加一个ID，然后

$("#formreference").submit(function(){
  var formData = new FormData($(this)[0]); //with this form data send to server with a post request similar that the shown before });

我认为最好阅读dom提交事件，在这种情况下，只需要上载功能

function upload(){ event.preventDefault(); $("#create_post_button").show();}

提交发帖请求并点击另一个发帖请求后，我如何留在同一页面上？

1 个答案: