0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

jQuery上传插件Uploadify的使用例子和相关资料

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

测试例子:

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

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

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

<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>
      <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>

更多帮助:

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

http://www.uploadify.com/documentation/

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法