基于Django/jQuery的多文件上传实现 -- 第一天

2009-12-17 19:24

简介

上一篇博客里面提到我想写一个电子书分享管理系统, 这个系统里面必不可少的部分是文件上传的实现. 这篇文章会写下我在实现这个功能时的想法和具体操作.

需求: 上传界面, 一开始页面上只有一个上传按钮, 点击按钮后选择一个或多个文件上传. 上传过程中不刷新页面, 显示进度条. 开始上传后, 显示界面提示让用户填写书籍相关信息. 例如书名, 作者, 出版社等等. 从文件名正则匹配拿到尽量多的信息. 匹配出来的东西显示在对应的输入框里面, 剩下未识别的内容允许用户拖动到对应的域里面去. 如果是单个文件上传, 上传完成后服务器端代码用适当的工具软件读取上传完的文件, 从里面拿到适当的信息, 也反馈到客户端, 也能够让用户拖动等等. 如果是多个文件, 则在填写文件信息的页面上提供导航功能. 如果某个文件信息填写已完成, 而文件上传尚未完成, 提示用户需要等待上传完成后才能提交文件信息. 好吧, 这个是一个很纠结的需求...

参考链接:

第一天(091217)进度

今天基本是在调研. 前两天找到一个ajax上传的jQuery插件, 是点击按钮后上传. 看了看这个插件的代码, 发现它的原理是点击按钮后创建一个隐藏的file input, 然后通过一个隐藏的iframe来提交文件, 这样能够在页面不刷新的情况下上传文件, 思路很是直接. 今天又看了看, 发现这个插件不能满足我的要求, 因为它肯定没有办法支持多个文件同时上传. 这个是HTML表单的限制, 单个file input里面只能放一个文件. 网上有另外一个jQuery插件来实现HTML/js的多文件上传, 思路也很直接: 创建多个file input, 除了显示一个file input以外其他全部设为隐藏. 这个js的缺点在于不能一次选定多个文件, 而且在不改源代码的情况下, 似乎没有办法让已经选定的文件立即开始上传(因为这个似乎没有做ajax上传, 好吧我没有特别认真地去看代码, 也许它的确有这个功能). 最后找到的Uploadify也许能够实现我想要的功能. 这个插件利用Flash来打开文件选择窗口, 这样我们能够在上传窗口中同时选取多个文件. 于是我打算拿这个插件来试试.

试用Uploadify: 这个插件的大小有点唬人, 最新版标称大小是600K+, 不过实际上js脚本大小只有几K, 即使包括其他的资源文件, 也是很小的一个插件. 看着demo页面的html改好了, 试验下, 发现目前有这么几个问题:

  1. 按钮颜色和我用的jQueryUI的smooth主题不搭
  2. 按钮的字写的是BROWSE
  3. 没有选择后立即上传, 而是点击上传链接后上传
  4. 上传的进度条没用jQueryUI的进度条

这几个问题都有希望能解决. 第一个和第二个实际上是对这个swf文件的不满. 有几种思路来解决这些问题: 首先想到的是改flash源文件, 这个文件在作者提供的压缩包里面有, 改的话也不算难, 拿Flash打开, 改改就行了. 不过存在的问题是不具有普适性, 不方便修改. 后来发现这个插件的配置项里面有相应的选项能够修改按钮的提示内容和背景图片, 不过这个仍然不是完美的解决方案. 我设想能够将这个swf隐藏起来, 自己创建一个按钮, 点击这个按钮时调用swf的内容来实现多个文件的选择, 这样完全不依赖这个插件的swf文件, 最好了, 不过能不能这样tweak还不知道. 明天再尝试下. 第三个问题也应该比较容易解决, 这个插件给了很多钩子, 能够很容易地自定义(写到这儿, 不由得想怒赞下这个插件!), 没有尝试过, 不过应该能够得到解决, 最后一个问题是进度条, 这个看起来也不会是太大的障碍. 明天有空再解决吧.