Question

我有2个django模型：

class Image(models.Model):
    name = models.CharField(max_length=100)
    photo = models.ImageField(upload_to='upload/', blank=True)

class  Preview(models.Model):
    photo = models.ImageField(upload_to='preview', blank=True)

然后我使用ImageForm创建ModelForm并在html模板中呈现它。我想在页面中进行图像预览。我使用https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

<script src="/static/js/jquery.ui.widget.js"></script>
<script src="/static/js/jquery.iframe-transport.js"></script>
<script src="/static/js/jquery.fileupload.js"></script>
<script>
    $(function () {
        $('#id_photo').fileupload({
            dataType: 'json',
            url: '{% url preview %}',
            always: function (e, data) {
                $('#preview').css({'visibility': 'visible'});
                $('#preview').prepend('<img src=/static/'+data.result.url+' />')
            }
        });
    });
</script>

    <form method="POST" action="edit/" enctype="multipart/form-data">
    <div class="field">
        {{ form.photo.errors }}
        <label for="id_photo">Photo:</label>
        <input type="file" name="photo" id="id_photo" >
    </div>

    <div id="preview">
    </div>

    <input type="submit" name="Change">

所以在javascipt的帮助下，我将图片发送到服务器，调整大小（在preview视图中 - 它处理PreviewForm），保存在磁盘上并返回插入的网址img标记。有用。

按提交按钮后，我无法在视图中收到图像文件（edit进程ImageForm）：request.FILES为空!!! 当我禁用“使用js上传图像”时，编辑视图工作正常：request.FILES包含图像，我可以保存它..

在第二次request.FILES请求中导致消失POST的原因是什么？

Answer 1

您需要了解的第一件事是HTTP是stateless协议。客户端对服务器所做的每个请求都是唯一的，并且与前一个请求无关。

在您的情况下，您提交表单并附上您要上传的图片并进行上传，以便您可以在request.FILES中查看图片并显示预览

但是，一旦您上传并显示新页面，当然request.POST将为空，因为您没有上传任何内容，该文件已经在您的服务器中，等待批准。

在准备预览时，正确的解决方案是创建一些hidden输入字段，以帮助您确定要批准的照片（unique ids在这种情况下非常好，也不要除非您是唯一使用该应用程序的人，否则不要将文件路径直接暴露给您的客户端。

然后在第二个请求中，检索那些hidden field，找到图像并执行您要执行的操作;在你的情况下，批准并以某种方式公开。

django：双文件上传：js和html

1 个答案: