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

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'