简单好用的 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 的体积,其实我还想再压缩一下,可惜压缩之后就不能用了… 可能是我压缩的方式不对,还是那句话,欢迎交流~~~

posted @ 2013-07-24 23:14  ABEL  阅读(6616)  评论(1编辑  收藏  举报