在做网页设计的时候,设计师常常会把上传按钮设计得非常漂亮,还用了什么放大镜之类的图标来表达 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 的体积,其实我还想再压缩一下,可惜压缩之后就不能用了… 可能是我压缩的方式不对,还是那句话,欢迎交流~~~

简单好用的 AJAX 上传插件,还可以抛弃难看的 file 按钮哦~的更多相关文章

  1. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  2. php头像上传插件

    最近找到了一个比较简单实用的php头像上传插件,兼容IE8及以上等主流浏览器,分享给大家.效果如下: 1.首页效果图:默认显示默认图片. 2.点击图片(拥有裁剪框,可以拖动.缩放.裁剪头像等功能,注意 ...

  3. 在jquery中,使用ajax上传文件和文本

    function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...

  4. 【jQuery插件】使用cropper实现简单的头像裁剪并上传

    插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...

  5. bootsrap 上传插件fileinput 简单使用

    1.安装 下载fileinput文件,载入对应的css+js文件,如下: <link href="css/bootstrap.min.css" rel="style ...

  6. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  7. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  8. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  9. Plupload上传插件简单整理

    Plupload Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部 ...

随机推荐

  1. 【转载】Hadoop可视化分析利器之Hue

    http://qindongliang.iteye.com/blog/2212619 先来看下hue的架构图:  (1)Hue是什么? Hue是一个可快速开发和调试Hadoop生态系统各种应用的一个基 ...

  2. PHP面向对象之将数据库的查询结果序列化成json格式

    <?php class link_mysql{ private $host,$uid,$pwd,$db,$link,$res; function link_mysql($_host,$_uid, ...

  3. C#通用类型转换 Convert.ChangeType 转自网络

    static public object ChangeType(object value, Type type) { if (value == null && type.IsGener ...

  4. Part 57 to 58 Why should you override ToString and Equal Method

    Part 57 Why should you override ToString Method sometimes you can override ToString method like that ...

  5. C#.NET实现Word或Excel文件转为HTML文件

    Word文件转html,返回相对路径 private string GetPathByDocToHTML(string strFile) { if (string.IsNullOrEmpty(strF ...

  6. windows 7 打开控制面板的命令

    在开始菜单中键入contrl,回车就进入了控制面板,比较快

  7. 向php文件中添加php.ini文件

    向php文件中添加php.ini文件 默认情况下,php是没有php.ini配置文件的,必须手工添加php.ini文件 在php安装目录中,复制php.ini文件到/usr/local/php/lib ...

  8. C++ 四则运算简单设计

    如果说要用C++写一个简单的四则运算的程序,相信难不到人,这还不简单吗?然后用不了五分钟,三下五除二,就出了下面的代码,一调试,没问题..... #include <iostream> u ...

  9. 《C++Primer中文版》读书笔记——第1章 开始

    istream对象:cin(标准输入对象); ostream对象:cout(标准输出对象) cerr(输出错误和警告) clog(输出一般性信息) 读取数量不定的输入数据,eg , sum=; whi ...

  10. ubuntu 常用参数设置

        在Linux下,对于参数的设置,一般来说,都遵循这个规律.每一个功能程序,一定对于一个对于名字的配置文件.     涉及到多用户的功能配置,一定有一个全局的配置文件,对所有用户都生效,而每个用 ...