`
小码哥BASE64
  • 浏览: 123619 次
社区版块
存档分类
最新评论

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/ 

  • 大小: 44.1 KB
分享到:
评论

相关推荐

    jquery文件上传插件 jquery.uploadify.js

    《jQuery文件上传插件jQuery.uploadify.js:跨越浏览器限制的智能解决方案》 在Web开发中,文件上传功能是一项常见的需求,而jQuery.uploadify.js是一款高效且用户友好的文件上传插件,尤其对于需要兼容多种浏览器...

    jquery上传插件Uploadify3.2中文参考手册

    资源名称:jquery上传插件Uploadify3.2 中文参考手册内容简介:上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。今天我要给大家介绍额就是一...

    jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改

    在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...

    JQuery批量上传插件Uploadify使用详解及参数说明.docx

    **jQuery批量上传插件Uploadify**是一款非常实用的前端文件上传工具,它允许用户通过Flash技术实现批量、异步的文件上传。Uploadify提供了一系列可配置的参数,使其能够适应各种上传需求,同时具备良好的用户体验。 ...

    JQuery批量上传插件Uploadify并传参数(二)

    在IT行业中,jQuery批量上传插件Uploadify是一个广泛使用的工具,尤其在网页应用程序中,它提供了用户友好的文件上传体验。这篇博客文章“JQuery批量上传插件Uploadify并传参数(二)”可能深入探讨了如何在使用...

    jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序

    本实例将探讨如何利用jQuery上传插件Uploadify与PHP技术来构建一个强大的文件上传系统。Uploadify是一款广泛使用的前端插件,它使得文件上传过程更加直观、用户友好,并且支持批量上传和自定义样式,极大地提升了...

    jQuery上传插件uploadify

    **jQuery上传插件Uploadify详解** Uploadify是一款基于...总之,jQuery上传插件Uploadify是提高Web应用中文件上传体验的利器,通过其丰富的参数设置和事件处理,开发者可以定制出满足各种需求的文件上传解决方案。

    JQuery上传插件Uploadify

    总之,jQuery上传插件Uploadify是一个强大且灵活的工具,可以帮助开发者轻松地实现在网页上的文件上传功能,通过定制其参数和事件,可以满足各种项目需求。但随着技术的发展,考虑向HTML5的File API迁移也是必要的,...

    .net jQuery上传插件Uploadify 文件 上传 实例,简单易懂

    在.NET开发中,文件上传是一项常见的任务,而jQuery Uploadify插件则为这一过程提供了便捷的解决方案。Uploadify是一款基于JavaScript和Flash的文件上传组件,它允许用户通过拖拽或选择文件的方式,实现多文件同时...

    多文件上传之uploadify

    Uploadify是一款基于Flash和jQuery的多文件上传插件。尽管Flash在某些现代浏览器中逐渐被淘汰,但在处理文件上传时,其跨平台和兼容性优势依然明显。Uploadify通过创建一个隐藏的Flash对象,能够模拟多选文件上传,...

    C# JQuery上传插件Uploadify使用

    Uploadify是一款基于JavaScript和Flash的文件上传插件,它与jQuery库紧密结合,为Web应用程序提供了简单易用且功能丰富的文件上传功能。在C#后端环境中,Uploadify可以帮助开发者实现多文件同时上传,大大提升了用户...

    JQuery 上传插件Uploadify使用2 多文件上传

    **jQuery Uploadify 插件详解:实现多文件上传** jQuery Uploadify是一款强大的文件上传插件,它极大地简化了网页上的文件上传操作,尤其在处理多文件上传时表现优秀。本篇将详细介绍Uploadify的使用方法及其核心...

    jquery 上传插件Uploadify-v3.0.0.zip

    jQuery Uploadify是一款广泛使用的文件上传插件,它极大地简化了在Web应用中实现多文件上传的功能。这个插件的主要版本是v3.0.0,它提供了丰富的自定义选项和良好的用户体验。在本文中,我们将深入探讨Uploadify的...

    JSP使用文件上传插件uploadify示例

    2. **初始化设置**:在JavaScript代码中,通过jQuery选择器找到上传按钮,并调用uploadify插件进行初始化,设置如上传URL、文件类型、队列大小限制等参数。 3. **事件监听**:uploadify提供了一系列事件,例如`...

    JQuery_ 文件上传_Uploadify插件

    **jQuery_文件上传_Uploadify插件** 在Web开发中,文件上传功能是常见的需求,尤其是在用户需要上传图片、文档等素材的场景下。jQuery Uploadify插件是一款强大的JavaScript库,它利用AJAX和Flash技术,实现了无...

    JQuery上传插件Uploadify使用详解

    JQuery Uploadify插件是一个基于JQuery的文件上传组件,它提供了一种用户友好的界面,支持多文件选择、上传进度显示以及批量上传等功能。在ASP.NET环境中使用Uploadify,你需要按照以下步骤进行配置和编码。 首先,...

    多文件上传插件uploadify

    Uploadify是一款流行的多文件上传插件,它允许用户在网页上批量上传文件,同时具有良好的浏览器兼容性。这个插件对于那些需要在网站上实现高效、便捷文件上传功能的开发者来说,是一个非常实用的工具。在本文中,...

    JQuery上传插件Uploadify并传参数(一)

    **jQuery上传插件Uploadify详解及参数传递方法** 在Web开发中,文件上传功能是常见的需求,而jQuery的Uploadify插件提供了一种简洁、高效的方式实现这一功能。本篇文章将深入探讨Uploadify插件的基本使用,以及如何...

Global site tag (gtag.js) - Google Analytics