![](/img/trans.png)
[英]Sending data from Python to Javascript using only one URL in Flask
[英]Sending Data from Python (Flask) to Javascript?
我正在尝试在我的网站上实现拖放文件上传器。 文件在被删除后立即上传,我想在预览下弹出一个带有烧瓶的URL。 我正在使用dropzone.js。 在dropzone的文档中,提供了一个示例,作为从服务器发回数据以在文件上载后显示的指南。 https://github.com/enyo/dropzone/wiki/FAQ#i-want-to-display-additional-information-after-a-file-uploaded
但是,当我尝试在创建dropzone的Jinja模板中的内联Javascript中使用url_for时,我回到了一个看起来像/%7Bfilename%7D的链接只是为了确保我在那里为URL弹出一个快速打印语句,它在控制台中显得很好。
我在python中的上传者:
def upload_file():
if request.method == 'POST':
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
if is_image(file.filename): # generates a shortened UUID name for the image
filename = shortuuid.uuid()[:7] + "." + file.filename.rsplit(".", 1)[1]
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
@app.route ('/<filename>')
def uploaded_image(filename):
return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
和我的index.html模板中的内联JS:
<script>
var mydropzone = new Dropzone(document.body, {
url: "{{url_for('upload_file')}}",
previewsContainer: "#previews",
clickable: "#clickable",
init: function() {
this.on("success", function(file, responseText) {
var responseText = " {{ url_for('uploaded_image', filename='{filename}')}} ";
var span = document.createElement('span');
span.setAttribute("style", "position: absolute; bottom: -50px; left: 3px; height: 28px; line-height: 28px; ")
span.innerHTML = responseText;
file.previewTemplate.appendChild(span);
});
}
});
我错过了一些基本的东西吗? 我是否需要使用类似JSON / Ajax的东西(从来没有使用过这些,但谷歌总是把它们搞定),因为URL是从服务器发回的数据?
只是:
将文件路径返回给客户端:
def upload_file(): if request.method == 'POST': # ... snip ... return url_for('uploaded_image', filename=filename)
删除on('success')
函数中的var responseText
行,因为您将在响应中返回URL。
您非常接近它,但您必须通过JSON发送URL。
问题是,在URL实际可用之前,首次加载页面时(在Jinja模板中)调用url_for('uploaded_image')
。 它认为你要求一个名为{filename}
的文件的URL。
尝试从POST请求中返回具有新URL的JSON响应:
return jsonify({'fileURL':url_for('uploaded_image', filename=filename)})
从那里,你可以用JS做任何你想做的事情。 你有什么应该工作,只需从responseText获取URL。
编辑:固定回报。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.