在视图和模板中使用 django ajax 上传器答案

【问题标题】：using django ajax uploader in view and template在视图和模板中使用 django ajax 上传器
【发布时间】：2012-05-25 15:41:57
【问题描述】：

我一直试图让django ajax uploader 在我的django application 中工作。我一定是脑死了 :( 因为我无法让它工作——这应该是一件容易的事，据许多用户说代码。

我已经安装了django ajax uploader并将其添加到已安装的应用程序中。我决定不使用STATIC_URLs，而是将css and js文件放入MEDIA_ROOT并使用MEDIA_URL为它们提供服务。

如step4 of the doc 中所述，我还在start.html 中的<script> 中包含anonymous function 标记- 将操作更改为{% url ajax_upload %}

在我的start.html 页面中，我需要一个文件输入元素，以便在选择文件时将文件上传到服务器上的某个位置。

所以我创建了这样的 html

<form enctype="multipart/form-data" method="post" action="{% url upload_without_ajax %}"> {% csrf_token %}
<input type="file" name="fselect" id="file-uploader"> </input>
</form>

start.html 由views.start 方法渲染

views.py -

def start(request, template_name):
    csrf_token = get_token(request)
    reqctx = RequestContext(request,{'csrf_token': csrf_token })
    return render_to_response(template_name,reqctx)

import_uploader = AjaxFileUploader()

这是我的问题。

1. 给输入元素id=file-uploader 是否足以导致文件上传？或者我必须在我的javascript 中调用$('#file-uploader').change( 吗？

2.我只需要将选择的文件写入MEDIA_ROOT/uploads 文件夹，我认为默认的LocalUploadBackend 就是这样做的。在 urls.py 中，我将 views.import_uploader 映射到 url ajax_upload

url(r'^ajax_upload$', 'views.import_uploader',name='ajax_upload'),

仍然没有发生文件上传..

我无法从 github 站点中的给定代码中得到很多信息。如果有人可以帮助我，将不胜感激

【问题讨论】：

标签： javascript ajax django upload

【解决方案1】：

我目前也在处理我的 django-ajax 文件上传。但是我的模板部分通过放置默认值可以正常工作。

file-uploader 是 div 的 id，而不是实际的输入文件类型。根据我在 fileuploader.js 中读到的内容，该脚本将使用标准样式为您创建文件上传元素。我不是 js 大师，但我相信您可以在 fileuploader.js 中自定义它？

在下面的 js 函数中，我试图通过尝试在 params: {..} 和 action: "{% url ajax_upload %}", 中添加名称和值的新项目来将实例的 pk 作为 ajax 的参数传递，action: "{% url ajax_upload %}", 指向这个 @987654323 @

我希望这是否有帮助..给我投票：[

<!doctype html>
<head>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>-->
    <script src="{{ STATIC_URL }}js/jquery-1.9.1.js" ></script>
    <script src="{{ STATIC_URL }}ajaxuploader/js/fileuploader.js" ></script>
    <link href="{{ STATIC_URL }}ajaxuploader/css/fileuploader.css" media="screen" rel="stylesheet" type="text/css" />
    <script>

        function createUploader(pk){            
            var uploader = new qq.FileUploader({
                element: $('#file-uploader')[0],
                action: "{% url ajax_upload %}",
                debug: true,
                multiple: false,                    
                onComplete : function(id, fileName, responseJSON) {
                if(responseJSON.success) {
                    alert("success!");
                } else {
                    alert("upload failed!");
                }                    
                },                    
                params: {
                'csrf_token': '{{ csrf_token }}',
                'csrf_name': 'csrfmiddlewaretoken',
                'csrf_xname': 'X-CSRFToken',
                'pk': pk,
                },           
            });
        };

        $(document).ready(function(){
            createUploader({{instance.id}});
        });          
    </script>
</head>
<body>    
    <div id="file-uploader">        
    </div>   
</body>
</html>

【讨论】：

【解决方案2】：

除了 html 之外的一切似乎都很好。但是，您应该检查您是否有 python 2.7，因为 2.6+ 与 django-ajax-uploader 不兼容。（反之亦然！）

如果你继续使用 python 2.7，你应该克隆 https://github.com/lazerscience/django-ajax-uploader

git clone https://github.com/lazerscience/django-ajax-uploader
cd django-ajax-uploader
python setup.py install

这应该足够了。（不要忘记像 repo 中的示例一样更改 html，是的，#file-upload 可以与 jQuery 一起使用。

【讨论】：