基于jQuery的Web上传插件Uploadify使用示例

前端技术 2023/09/04 JavaScript

Uploadify是一款功能强大，高度可定制的文件上传插件，实现的效果非常不错，带进度显示。在最简单的方式下，Uploadify使用很少的代码就可以运行起来。
Uploadify官方下载地址：http://www.uploadify.com/download/

测试例子
以下是一个使用的简单例子：
这里我们采用了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插件提示$(“#id”).uploadify is not a function错误可能原因
swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API，所以这两个文件需要依赖于jquery-1.4.2.min.js这个文件。
正常情况下需要引入如下几个js文件：

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

而在项目中已经存在了另外一个jquery的JS文件，导致文件冲突。而另外的一个jQuery文件的引入位置位于上面三个js文件引入位置的后面，此时项目中使用的是原本已经存在的jquery的JS文件，导致在加载jquery.uploadify.v2.1.4.min.js文件时还没有可用的jquery相关函数的定义，才会报这个错误。

解决方法：
去掉其中一个jquery的JS文件，并把swfobject.js和jquery.uploadify.v2.1.4.min.js文件放到引入jquery的JS文件的位置的后面即可。

本文地址：https://www.stayed.cn/item/9276

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案