超炫Ajax多文件无刷新上传（加载uixml文件失败怎样恢复）

一、使用jquery.form.js进行无刷新上传文件，这种方式直接使用form表单（无iframe）实现

简单效果如下（样式可进行调配）：

左边为点击“添加图片”选择文件，即可通过form的ajaxSubmit方法提交，上传完根据返回数据即可看到效果，具体实现如下：

第一步，设置“添加图片”触发按钮

第二步，在页面任何位置放置，注意设置form，height：0；width:0;看到不占符行了：

最后一步，根据input 的type="file" 的change触发事件，执行form的ajaxSubmit方法即可：

二、使用file_upload_plug-in.js 插件实现无刷新上传文件

下面为具体实现：

三、重头戏来了，利用FormData+$.ajax实现多文件+进度条无刷新上传

先看看效果,是不是很炫，

先设置选择文件触发事件

根据获取到的文件显示，并存储在一个全局对象curFiles里，之后增删都是对该对象进行操作，注意由于files.Filelist.length不可操作，需要进行重定义到curFiles对象，Array.prototype.push.apply(curFiles, files);

删除不合格式或选中文件，用filter方法剔除：

curFiles = curFiles.filter(function(file) {return file.name !== name;})

最重要一步，在上传之前需要将提交信息交到FormData对象，并将FormData对象当做ajax的data数据属性提交

上传进度条的实现

本次就分享到此，下期将继续。还有上期说了分享在线文件管理系统源码的，但因为最近较忙，没时间整理，偶后将在本期评论中公布在线文件管理系统源码的下载链接，感谢各位亲的支持与关注。

有事找小编，没事也找小编，相互学习和交流。