js之文件上传（含进度条，回调）向下兼容

之前分享过一篇拖拽上传预览的实现是基于html5的，在那篇文章中，我们实现了拖拽预览，对于上传并没有特别提及到：这篇算作对文件上传的补充吧

在html5之前我们上传文件一般都会用form表单进行提交，from.submit()即可

ok,添加需求如下：

1.上传成功后执行回调函数

2.上传过程显示上传进度条

这两种需求都不为过，很多现实中都会需要用到

如果是ajax上传就可以很简单的实现两种效果，而form表单提交则要另想他法，但是传统的文件上传还是要基于form表单，

这里传统俩字为啥加粗了，因为是传统的，xhr2就开创了非传统先河，咱们后面会说到。

先说说传统的做法：

需求一：我们可以和后台进行配合利用jsonp去完成回调

function formAjax(fn){

var form =$(form),

now = (new Date()).getTime(),

jsonp = 'jsonp' + now,

callback={},

action = form.action;

callback[jsonp] = function(data){

fn && fn(data.statusText);

};

jsonp = 'zip_load.' + jsonp;

if(action.indexOf('callback') > -1){

action = action.replace(/zip_load.jsonp\d+/,jsonp);

}else{

action += (action.indexOf('?') > -1 ? '&callback=' : '?callback=') + jsonp;

}

form.action = action;

form.submit();

}

这种方式是利用jsonp方式定义一个函数名通过url传递给后台处理，成功后商议返回同名函数作为数据返回，前台再进行回调处理

需求二：我们在form中无法获得上传的任何消息，file文件是按照字节流上传的，不过我们可以利用ajax另外发送请求获得字节上传进度信息：

function progress(progress,fn){

var now = (new Date()).getTime();

if(progressUrl.indexOf('pro') > -1){

progressUrl = progressUrl.replace(/pro=\d+/,'pro=' + now);

}else{

progressUrl += (progressUrl.indexOf('?') > -1 ? '&pro=' : '?pro=') + now;

}

$.ajax({