Ajax 和 jQuery 实现进度条+上传文件到Django

作者: dimply
发布时间:2015-07-01 16:05:26

http://www.laurentluce.com/posts/upload-to-django-with-progress-bar-using-ajax-and-jquery/


本文中我打算描述一下,我如何实现用 Ajax 和 jQuery 实现上传文件到Django+进度条。我需要实现这个功能来让用户上传菜品图片到 Gourmious 并跟踪上传进度。

客户端

首先需要一个表单来让用户选择要上传的文件。

1 <form id="form_upload" action="/upload" method="POST">
2   <input type="file" name="picture" id="picture" />
3   <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
4   <input type="hidden" id="id" name="id" value=""/>
5   <input id="form_submit_button" class="tp-button" type="submit" value="Submit" />
6   </form>

这里增加了两个隐藏的输入框,第一个是 ‘X-Progress-ID’,代表上传 ID,这样我们才能够在服务器端支持并发的上传请求。稍后我们会看到,服务器是如何处理这个值的。

然后还有一个隐藏输入框 ‘id’,在我们的例子里代表菜品的编号。

我们将使用 Ajax 来发送 POST 请求,这样表单便可以很好地集成在现代的网络界面中,同时包含一个进度条。我们打算使用 jQuery Form plugin 来实现这一点。

函数 ajaxSubmit() 将会帮我们搞定一切。

为上传 ID 生成一个随机字串,并用它设置输入框的值。
需要指定一个用于上传请求的 URL 和两个回调函数:一个在请求前调用,另一个在请求完成后调用。

1 $('#X-Progress-ID').val('random string');
2 var options = {
3   dataType: 'xml',
4   url: '/upload?X-Progress-ID='+$('#X-Progress-ID').val(),
5   beforeSubmit: showRequest,
6   success: showResponse
7 }
8 $('#form_upload').ajaxSubmit(options);

showRequest 回调函数只需要像下面这么简单就行了:

1 function showRequest(formData, jqForm, options) {
2     // do something with formData
3     return True;
4 }

在 showResponse 函数中,我们需要处理响应,并对它进行操作。在我的例子里,我处理了服务器返回的带有状态值的 xml。

1 function showResponse(response) {
2     // do something with response
3 }

用户按下提交的时候,我们希望显示一个进度条,因此可以使用下面的 JS 代码,向表单添加进度条。progressBar() 方法是 jQuery progress bar plugin 的一部分。

1 $('#form_upload').find('#form_submit_input').append('&lt;span id="uploadprogressbar"&gt;&lt;/span&lt;');
2 $('#form_upload').find('#uploadprogressbar').progressBar();

现在我们需要添加一个每隔几秒运行一次的函数,来从服务器获取上传进度,并相应地更新进度条。

为此,我们使用 setInterval() 向服务器发出一个 GET 请求,获取 JSON 格式的进度值。我们向服务器传送上传 ID。当返回 null 值的时候,就可以知道上传已经结束。

01 function startProgressBarUpdate(upload_id) {
02   $("#uploadprogressbar").fadeIn();
03   if(g_progress_intv != 0)
04     clearInterval(g_progress_intv);
05   g_progress_intv = setInterval(function() {
06     $.getJSON("/get_upload_progress?X-Progress-ID="
07 + upload_id, function(data) {
08       if (data == null) {
09         $("#uploadprogressbar").progressBar(100);
10         clearInterval(g_progress_intv);
11         g_progress_intv = 0;
12         return;
13       }
14       var percentage = Math.floor(100 * parseInt(data.uploaded) / parseInt(data.length));
15       $("#uploadprogressbar").progressBar(percentage);
16     });
标签: Ajax Django Go jQuery
来源:http://blog.csdn.net/dimply/article/details/42425373

推荐: