jQuery上传插件Uploadify的使用例子和相关资料
本文由发表于6年前 | Javascript | 评论数 1 |  被围观 10,341 views+
测试例子:
以下是一个使用的简单例子:
更多帮助:

Uploadify - JQuery是一款功能强大,高度可定制的文件上传插件,在最简单的方式下,Uploadify使用很少的代码就可以运行起来。

测试例子:
以下是一个使用的简单例子:

从官网下载需要的Uploadify版本:http://www.uploadify.com/
这里我们采用了Uploadify包中自带的php测试脚本作为上传的处理,所以这里安装了wamp作为php的测试环境,在php的网站根目录中,解压上面下载好的Uploadify文件,并创建一个文件上传保存的目录,这里我们在Uploadify的解压目录中创建到了uploads作为文件保存目录。

创建uploadify_test.php文件,添加如下内容:

<html>
<head>
    <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />  
    <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script>  
    <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script>  
    <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 

    <style type="text/css">
        #custom-demo .uploadifyQueueItem {
          background-color: #FFFFFF;
          border: none;
          border-bottom: 1px solid #E5E5E5;
          font: 11px Verdana, Geneva, sans-serif;
          height: 50px;
          margin-top: 0;
          padding: 10px;
          width: 350px;
        }
        #custom-demo .uploadifyError {
          background-color: #FDE5DD !important;
          border: none !important;
          border-bottom: 1px solid #FBCBBC !important;
        }
        #custom-demo .uploadifyQueueItem .cancel {
          float: right;
        }
        #custom-demo .uploadifyQueue .completed {
          color: #C5C5C5;
        }
        #custom-demo .uploadifyProgress {
          background-color: #E5E5E5;
          margin-top: 10px;
          width: 100%;
        }
        #custom-demo .uploadifyProgressBar {
          background-color: #0099FF;
          height: 3px;
          width: 1px;
        }
        #custom-demo #custom-queue {
          border: 1px solid #E5E5E5;
          height: 213px;
          margin-bottom: 10px;
          width: 370px;
        }                
    </style>    

    <script type="text/javascript">
        $(function() {
        $('#custom_file_upload').uploadify({
              'uploader'       : 'uploadify-v2.1.4/uploadify.swf',
              'script'         : 'uploadify-v2.1.4/uploadify.php',
              'cancelImg'      : 'uploadify-v2.1.4/cancel.png',
              'folder'         : 'uploadify-v2.1.4/uploads',
              'multi'          : true,
              'auto'           : true,
              'fileExt'        : '*.jpg;*.gif;*.png;*.txt',
              'fileDesc'       : 'Image Files (.JPG, .GIF, .PNG)',
              'queueID'        : 'custom-queue',
              'queueSizeLimit' : 3,
              'simUploadLimit' : 3,
              'sizeLimit'   : 1024000,
              'removeCompleted': false,
              'onSelectOnce'   : function(event,data) {
                  $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
                },
              'onAllComplete'  : function(event,data) {
                  $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
                }
            });                
        });
    </script>
</head>
<body>
    <div id="custom-demo" class="demo">

          <h2>Custom Demo</h2>
        <p>Uploadify is fully customizable.  Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
        <div class="demo-box">
            <div id="status-message">Select some files to upload:</div>

            <div id="custom-queue"></div>
            <input id="custom_file_upload" type="file" name="Filedata" />        
        </div>
    </div>
</body>
</html>
更多帮助:

关于Uploadify的详细使用帮助,参考官方提供的帮助文档:

http://www.uploadify.com/documentation/
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/the-use-of-jquery-upload-plugin-uploadify-examples-and-related-information.html
关键字: , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2012 1/11
文章评论
    一条评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 代理设置问题引起的UnKnownHostException Jsoup执行execute()错误 2013/9/9
2 Java笔记 – 反射 动态代理 2013/12/25
3 操作系统接口-用户接口 程序接口 系统调用 2011/6/30
4 C++语法笔记 – 流类库与IO 2011/9/3
5 Map映射集合实现类HashMap的介绍和迭代遍历方法 2011/10/16
6 Javascript笔记 – Javascript中的运算符 2012/5/22
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.