如何让用户在CharField中引用他们上传的文件?

I've created a website in django, which mostly utilises a few simple apps to let a small team of users add events, manage a page displaying uploaded files etc. The most complex part is that each user has a homepage with content that they can manage themselves via a MarkupField (I'm using the one from https://github.com/jamesturk/django-markupfield), plus a series of subpages whose content they also control.

django我已经创建了一个网站,主要是利用一些简单的应用程序让用户添加事件的一个小团队,管理页面显示上传文件等。最复杂的部分是每个用户都有一个主页,他们可以管理自己的内容通过MarkupField(我使用一个来自https://github.com/jamesturk/django-markupfield),加上一系列的子页的内容也控制。

My problem is how to let them upload images and files, and easily reference these on their pages so as to include the images or create a link to the file. The uploading is fine, and the images/files can then be statically referenced if you know where the ImageField is putting them, but the users ideally shouldn't have to know anything about where django actually stores the files or where they are statically served from. My best idea so far is:

我的问题是如何让他们上传图片和文件，并很容易在他们的页面上引用这些图片，以便包括图片或创建文件的链接。上传是可以的，如果您知道ImageField将它们放置在哪里，那么可以静态地引用图像/文件，但是理想情况下，用户不需要知道django实际存储这些文件的位置或它们的静态服务来源。到目前为止，我最好的想法是:

Create a file/image upload model with the UserPage as a ForeignKey
创建一个文件/图像上传模型，用户页作为一个外国人
Let the user upload as many images or files as they like for each page
让用户为每个页面上传尽可能多的图片或文件
Modify the MarkupField to first parse the text and replace some new syntax (e.g. something like '&&IMAGE_1' to reference the first uploaded image associated with the page) with the correct static url for where the referenced imagefield actually stores it.
修改MarkupField，首先解析文本，并使用正确的静态url替换一些新的语法(例如'& image_1 '，以引用与页面关联的第一个上传图像)。

The downsides of this would be that I'm inventing my own little piece of syntax and have to parse it reliably. That shouldn't be too difficult, but is there an existing way to accomplish the same thing, or an alternative approach worth considering? I'm not sure if I might be missing at least a more natural way to do it within the django framework.

这样做的缺点是我发明了我自己的一小块语法并且必须可靠地解析它。这不应该太困难，但是否存在一种现有的方法来完成同样的事情，或者一种值得考虑的替代方法?我不确定是否会错过在django框架中进行这种操作的更自然的方法。

1 个解决方案

#1

Sounds like you're off to a good start.

听起来你的开局不错。

A few things it sounds like you might not be aware of:

有些事情听起来你可能没有意识到:

FileField, and thus its subclass ImageField, has a .url property.
FileField及其子类ImageField具有.url属性。
If you want to keep your MarkupField vanilla, you can override the model's save() method to add the extra syntax.
如果您想要保留MarkupField vanilla，可以重写模型的save()方法来添加额外的语法。

My solution would be to have your template return a list of images with javascript set up so that the user is presented with a list of his images, and can click on one to add it to what she is writing. I like to use jquery for this sort of thing, but you could also do it in pure javascript. Your list could appear when they click an "add image" button, appear automatically when they start to type image-adding syntax, or both. I would also have thumbnails automatically generated and add a .thumbUrl to the model so that the user could choose the image from thumbnails.

我的解决方案是让您的模板返回一个设置了javascript的图像列表，这样用户就会看到他的图像列表，并可以单击其中一个将其添加到她正在编写的内容中。我喜欢用jquery来做这种事情，但是你也可以用纯javascript来做。你的列表可以在他们点击“添加图片”按钮时显示，也可以在他们开始输入图片添加语法时自动显示，或者两者都显示。我还将自动生成缩略图，并向模型添加. thumburl，以便用户可以从缩略图中选择图像。

So the idea is along the lines of:

所以这个想法是沿着:

function addImgMarkup(imgUrl){
    $('#idOfMarkupTextFormField').val($('#idOfMarkupTextFormField').val()
+ 'imageSyntax' + imgUrl); }

in the jquery document.ready function, and

在jquery文档。准备好功能,

{% for uplImg in UserPage.uploaded_image__set.all %}
<a href="#" onclick="addImgMarkup({{uplImg.url}})">
    <img src="{{uplImg.thumbUrl}}" alt="{{uplImg.name}}"></img>
</a>
{% endfor %}

in the html.

在html。

Please ask if you want clarification on any of this.

请询问您是否需要对此进行澄清。

#1