在视图和模板中使用django ajax uploader

时间:2012-05-18 03:22:50

标签: javascript ajax django upload

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

我已安装django ajax uploader并将其添加到已安装的应用中。我决定不使用STATIC_URL,而是将css and js文件放入MEDIA_ROOT并使用{ {1}}为他们服务。

我还在MEDIA_URL中的<script>内添加了anonymous function start.html内置step4 of the doc - 将操作更改为{% 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网站上的给定代码中得到很多。如果有人可以帮助我,我将非常感激

2 个答案:

答案 0 :(得分: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

这应该足够了。 (不要忘记更改html,就像repo中的示例一样,是的#file-upload本身可以用jQuery工作。

答案 1 :(得分:0)

我正在努力上传我的django-ajax文件。但我的模板部分通过放置默认值正常工作。

其中file-uploader是div的id而不是实际的输入文件类型。从我在fileuploader.js中读到的内容,这个脚本将为您创建文件上传元素,但标准样式。我不是js guru,但我相信你可以在fileuploader.js中自定义它?

在我的js函数中,我试图通过尝试在params: {..}中添加名称和值的新项目来传递我的实例的pk作为ajax的参数,而action: "{% url ajax_upload %}",是指针这个url(r'^ajax-upload$', 'yourapp.views.import_uploader', name="ajax_upload"),

我希望这有帮助或不...让我投票:[

<!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>