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

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文件的位置的后面即可。

(0)

相关推荐

  • Jquery Uploadify上传带进度条的简单实例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" ru

  • 图片上传插件jquery.uploadify详解

    1.js代码: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>

  • firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误

    解决了uploadify插件在chrom频繁崩溃的问题,又遇到了新问题,ff浏览器下报HTTP 302错误, ff浏览器下 uploadify 利用flash进行post上传时没有包含原来的session信息,而是重新创建了一个session,新的session无法通过登录验证,因此被重定向到了登录页面. 解决的方法无非就是将原session一起post到服务器端,然后服务器端登录验证之前将需要验证的session改为post过来的那个...(语言组织能力太差-,-). jquery.uploa

  • php+jQuery.uploadify实现文件上传教程

    这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了.今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/! 简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了! 复制代码 代码如下: <!

  • jQuery文件上传插件Uploadify使用指南

    对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法:1.加载JS和CSS 复制代码 代码如下: <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script&

  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧: 1. 下载 官方网站:http://www.uploadify.com/ 直接下载:jquery.uploadify-v2.1.0.rar 我的Demo: MyUpload.rar                官方网站也有demo 下载解压后: 说明:它里面有demo  但是是PHP的,还有一个帮助文档:uploadify v2.1.0

  • Jquery Uploadify多文件上传带进度条且传递自己的参数

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" r

  • JQuery上传插件Uploadify使用详解及错误处理

    什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使用. 下载 官方下载 官方文档 官方演示 我们提供的Uploadify下载地址 如何使用 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFile文

  • jquery uploadify和apache Fileupload实现异步上传文件示例

    jQuery Uploadify + Apache Fileupload异步上传文件示例1.可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可):2.后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传:3.文件上传目录可以任意指定,请在web.xml中配置:Uploadify api 详见http://www.uploadify.com/documentation/ FileUploadServ

  • 详解jquery uploadify 上传文件

    网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键.(以后坚决养成没事就看API的习惯)    Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行.    另一个参数,网上很少提到,是 buttonImg( 按钮图片),这时你完全可以

  • 解决jQuery uploadify在非IE核心浏览器下无法上传

    一.jquery uploadify自我介绍: (1).大家好,我是jquery插件大家族中负责实现异步上传的插件,我不是唯一,只是较好用的一款. (2).我的功能: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel--) 通过接口参数和CSS控制外观 Uploadify主页地址

  • Jquery uploadify图片上传插件无法上传的解决方法

    首先你确定你使用的插件的版本,版本不同,产生的问题也不同,我用的是3.2.1的版本,我前几天已经做好的功能今天运行的时候出错了,搞了半天也不知道那错了,最好仔细寻找,原来是jquery库的引入问题,可能是我引入的包版本低了,我换了一个js库立马好了,真是坑爹啊,谁需要这个demo的可以邮件我!

  • Jquery上传插件 uploadify v3.1使用说明

    官方地址:http://www.uploadify.com/ 我们提供的下载地址:http://www.jb51.net/jiaoben/21484.html 官方英文文档:http://www.uploadify.com/documentation/ 使用方法(.net版本): 前台JS 复制代码 代码如下: $("#id").uploadify({ height: 30, swf: '/uploadify/uploadify.swf', uploader: '/Handler/up

随机推荐