简单好用的 AJAX 上传插件，还可以抛弃难看的 file 按钮哦~

在做网页设计的时候，设计师常常会把上传按钮设计得非常漂亮，还用了什么放大镜之类的图标来表达 browse 的效果。可是她们不知道，type=”file” 的按钮在不同浏览器上的效果是不一样的，而且要做成统一的外观还非常困难。可是作为一名程序猿，美工MM给你设计了这么漂亮的上传按钮，你怎么可以不满足她呢？开什么玩笑~ 我们当然要不惜一切来实现MM们设计出来的效果，比如我们还可以请出 JavaScript 嘛~

好了，段子讲完，下面就来介绍一下今天的主角，一款非常朴实 JavaScript 插件：AjaxUpload。

叫做 AjaxUpload 的插件实在太多太多了，在网页上一搜一大把，而我说的这个插件，是由 Andris Valums 在 2008 年开发的，到现在真的是有点古老了，但它确实是一款实用、并且容易上手、能够满足今天所说的需求的插件。很可惜的是，目前作者已经把项目迁移了，并且新版本已经没这么「纯粹」了，所以我还是来推荐一下这个老版本的 AjaxUpload 插件。

 

先说兼容性

这个插件我从三年前使用至今，当初就是为了考虑兼容各种浏览器而选择了它，包括 IE 6/7/9/10、Chrome、FireFox 这些常用浏览器都没问题。
刚刚写好 DEMO 甚至还测试了 iPhone 自带的 Safari 浏览器，也没有问题，可见兼容性还是很强的。

 

DEMO 下载：

由于官网已经迁移了，所以我就写了一个非常非常简陋 DEMO，大概介绍一下即可。下载地址：

ASP.NET 版：AjaxUploadDemo_ASPX.zip
PHP 版：AjaxUploadDemo_PHP.zip 

包括关键的 ajaxupload.js 文件也包含在其中了，所以先下载吧~

 

使用非常简单：

其实在 DEMO 中已经有注释，再介绍一下参数吧：

// 创建一个上传参数
var uploadOption =
{
    
    action: "upload.php",    // 提交目标
    name: "file",            // 服务端接收的名称
    autoSubmit: false,        // 是否自动提交
    
    // 选择文件之后…
    onChange: function (file, extension) 
    {
        // 选择文件之后，比如校验文件后缀…
    },
    
    // 开始上传文件
    onSubmit: function (file, extension)
    {
        // 可以来一个“正在上传”的提示
    },
    
    // 上传完成之后
    onComplete: function (file, response) 
    {
        // 文件上传之后，比如返回文件的URL，或者跳转到其它页面…
    }
}

// 初始化图片上传框
var au = new AjaxUpload("要绑定的元素", uploadOption);

// 如果 autoSubmit 为 false，应该要在适当的地方调用提交文件
au.submit();

 

最后

这么快就 ending 了？代码也贴上来了，下载也有了，真的就是这么简单的插件。
如果有兴趣，可以阅读一下源代码，里面还有几个参数我没用到，像是 hoverClass 这些，可以进一步美化上传按钮，满足美工MM那天马行空的想象力~
对于 16K 的体积，其实我还想再压缩一下，可惜压缩之后就不能用了… 可能是我压缩的方式不对，还是那句话，欢迎交流~~~