ajax 异步上传带进度条视频并提取缩略图

近期，我投身于一个充满富媒体功能项目的开发，视频上传功能是其核心之一。追求用户体验的我，决定实现异步上传，并添加进度条、状态响应、视频链接及缩略图提取等功能。

关于服务端响应，我期望得到的反馈如下：

```json

{

"thumbnail": "/slsxpt//upload/thumbnail/fdceefc.jpg",

"status": "success",

"link": "/slsxpt//upload/video/fdceefc.mp"

}

```

对于input file控件的问题，我避免使用form标签包裹，因为嵌套form在HTML中是不被允许的，并且form标签带有一些默认样式，这可能需要额外的CSS来覆盖。

之前，我曾使用过ajaxFileUpload来实现文件的异步上传。但该工具已经很久没有更新，代码存在bug，虽然最终勉强使用，但体验并不理想。更重要的是，ajaxFileUpload没有直接支持xhr2的progress事件，这使得添加进度条变得复杂。

我深入研究过多种方法。一种方法是在文件上传后，将进度信息保存到session中，并通过轮询服务器获取。我认为这种方法并不准确。我认为真正的进度应该反映服务器应用程序（如我的action代码）处理文件的进度。因为所有请求首先会提交给服务器软件（如tomcat），然后由它接收文件并处理。这意味着在action代码执行前，文件实际上已经上传完毕。

后来，我尝试使用jquery.form.js插件的ajaxSubmit方法。这个方法能以表单提交，好处是已经内置了对xhr2的progress事件的处理，可以在调用时传入一个处理进度的函数。对于不想使用input file被form包裹的问题，可以通过createElement来解决。由于一个小错误，这个方法并没有成功。

最终，我决定使用$.ajax方法来实现。它不需要关联form，可以像静态方法一样使用。唯一的遗憾是$.ajax的options中没有直接对progress的响应。但通过定制xhr对象，我们可以添加progress事件处理程序。在理解了ajaxSubmit方法中处理progress事件的方式后，我也可以在$.ajax方法中添加自己的progress事件处理函数了。为了将DOM操作与上传业务分离，我决定以插件的形式编写代码。这样可以让代码更具模块化和可复用性。参考狼蚁网站的SEO优化插件代码，我开始了插件的开发。

插件的核心代码如下：

```javascript

(function ($) {

var defaults = {

uploadProgress: null, // 进度处理函数

beforeSend: null, // 上传前处理函数

success: null // 上传成功处理函数

},

setting = {}; // 配置项存储对象

var upload = function($this){ // 插件主函数

$this.parent().on('change', $this, function(event){ // 监听文件变化事件

var formData = new FormData(); // 创建表单数据对象

var target = event.target || event.srcElement; // 获取目标元素（文件输入框）

// 处理文件上传逻辑...（这里省略具体实现细节）

}); // 事件监听结束

}; // upload函数定义结束

// 将插件发布到全局对象上（假设插件命名为jQuery.myUploadPlugin）...（这里省略发布步骤）

})(jQuery); // 确保在jQuery环境下执行插件代码（这里的jQuery可根据实际情况替换为对应的环境对象）