jquery 文件上传插件Uploadify 初探

简介:

最近使用了uploadify做文件上传,上传同时展示进度条,感觉简单方便,功能也叫完善,先记下来再说。

官方地址 http://www.uploadify.com/ 

提供了html5的版本和Flash的版本,html5的版本收费,所以使用的Flash版本,你懂的。。。

先来看下我的代码,看看uploadify使用有多简单、方便。。。

将下载的uploadify.zip解压,




 
 

这个文件需要在页面引用,当然jquery是肯定不能少了,如下是文件上传的html页面:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Uploadify</title>

     <link href="/js/jquery.uploadify-v2.1.0/uploadify.css"     rel="stylesheet"type="text/css" ></link>

 

  <script src="/js/jquery-1.9.1.min.js"></script>

 

    <script type="text/javascript"

     src="/js/jquery.uploadify-v2.1.0/swfobject.js"></script>

 

    <script type="text/javascript"

   src="/js/jquery.uploadify-v2.1.0/jquery.uploadify.js"></script>

 

    <script type="text/javascript">

        $(document).ready(function()

        {

            $("#uploadify").uploadify({

            'auto'     : false,//不自动上传

            'multi':false,//不支持多文件上传

                'uploader''/uploadify',//文件上传地址,对应后台服务器的接受地址

                'swf':'/js/jquery.uploadify-v2.1.0/uploadify.swf',//这个是Flash的文件选择插件

                //上传成功后执行的方法

                'onUploadSuccess':function(file,data,response){

                alert(response);

                alert(data);

                }

            });

        }); 

    </script>

 

</head>

<body>

  <!--   <div id="fileQueue"></div> -->

    <input type="file" name="uploadify" id="uploadify" />

     <p>

      <a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>|

      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>

    </p>

</body>

</html>

 

简单吧,只需要在页面有个file类型的input标签,在调用uploadify,就完事,uploadify就可以正常工作了。

现在我们来看看几个基本的参数都是什么意思:

auto   是否自动上传,自动上传是指选择文件后,必须要点上传按钮了

multi   是否可以同时选择多个文件

uploader   文件上传地址

swf   Flash插件地址

onUploadSuccess  上传成功后执行的方法,其中data为服务器返回的数据

 

更多配置请参见  http://www.uploadify.com/documentation/ 

目录
相关文章
|
21天前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
43 2
|
4月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
56 1
|
22天前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
32 4
jQuery Growl 插件(消息提醒)
|
24天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
34 4
jQuery Cookie 插件
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
4月前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
44 2
|
4月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
4月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
30 0
|
JavaScript 前端开发 PHP
20+ 个很棒的 jQuery 文件上传插件或教程(此文值得“推荐”和“收藏”)
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
3789 0
|
JavaScript 前端开发 PHP
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
2466 0