您的位置:网站主页> jquery 教程 > jquery uploadify用法

jquery uploadify用法

时间:2018-06-04 21:37:01   编辑:一切随缘   文章来源:php教程网 已阅读:178 次

编程入门教程[www.ask186.com]网站介绍 

    编程入门教程主要涉及WEB开发领域,主要为广大WEB开发人员提供最新的WEB开发资讯信息,包含php教程mysql教程php面试题在线调色板php学习以及常用( Amazon ApiGoogle Api)等API、爱问资源共享HTML转JS不显示xml...[详细]
广告投放: 编程入门教程:www.ask186.com 电话:15818865556

jquery uploadify用法

无论是做Web产品还是Web项目,文件上传是经常要用到的功能。以前经常听到做项目的同事抱怨:“这款文件上传控件功能强大但是用起来麻烦,最简单的 input上传使用方便但是功能太简单(例如不支持多文件),外观也不尽如人意”。之后我一直留意网上的上传控件,最近看到一款基于jquery的上传插 件Uploadify无论在功能、外观、可用性和扩展性上都有不错表现,于是研究了一番,介绍给大家。

Uploadify

简介

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:

  1. 支持单文件或多文件上传,可控制并发上传的文件数
  2. 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……
  3. 通过参数可配置上传文件类型及大小限制
  4. 通过参数可配置是否选择文件后自动上传
  5. 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)
  6. 通过接口参数和CSS控制外观
  7. 更多……

相关链接

Uploadify主页地址:http://www.uploadify.com/ 在该页面你可以了解到关于他的更多内容。

Uploadify在线演示:在线Demo

Uploadify配置参数及接口文档:http://www.uploadify.com/documentation

Uploadify插件下载地址:http://www.uploadify.com/download

使用方法

  1. 下载插件安装包后,可以看到里面的几个主要文件:jquery.uploadify.js(完成上传功能的脚本文件,在调用页面引用)、 uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件,flash控件)、upload.php(服务器端处理文 件,官方仅提供了php版的)
  2. 引用了插件文件后,在页面中做如下调用:
    //声明一个普通的html文件上传控件,并指定id
    <input type="file" name="fileInput" id="fileInput" />
    1.    
    2. //将声明的普通上传控件与Uploadify插件绑定  
    3. <span><</span>script type<span>=</span><span>"text/javascript"</span><span>></span>  
    4. $<span>(</span>document<span>)</span>.<span>ready</span><span>(</span><span>function</span><span>(</span><span>)</span> <span>{</span>  
    5. $<span>(</span><span>'#fileInput'</span><span>)</span>.<span>fileUpload</span> <span>(</span><span>{</span>  
    6. <span>//以下参数均是可选</span>  
    7. <span>'uploader'</span>  <span>:</span> <span>'uploader.swf'</span><span>,</span>   <span>//指定上传控件的主体文件,默认‘uploader.swf’</span>  
    8. <span>'script'</span>    <span>:</span> 'UploadHandler.ashx',//指定服务器端上传处理文件  
    1. <span>'cancelImg'</span> <span>:</span> <span>'cancel.png'</span><span>,</span>   <span>//指定取消上传的图片,默认‘cancel.png’</span>  
    1. <span>'auto'</span>      <span>:</span> <span>true</span><span>,</span>               <span>//选定文件后是否自动上传,默认false</span>  
    2. <span>'folder'</span>    <span>:</span> <span>'/uploads'</span>         <span>//要上传到的服务器路径,默认‘/’</span>  
    3. <span>'multi'</span>     <span>:</span> <span>true</span><span>,</span>               <span>//是否允许同时上传多文件,默认false</span>  
    4. <span>'fileDesc'</span> <span>:</span> <span>'rar文件或zip文件'</span>  <span>//出现在上传对话框中的文件类型描述</span>  
    5. <span>'fileExt'</span>   <span>:</span> <span>'*.rar;*.zip'</span><span>,</span>      <span>//控制可上传文件的扩展名,启用本项时需同时声明fileDesc</span>  
    6. <span>'sizeLimit'</span><span>:</span> <span>86400</span>           <span>//控制上传文件的大小,单位byte</span>  
    7. <span>'simUploadLimit'</span> <span>:</span><span>5</span>         <span>//多文件上传时,同时上传文件数目限制</span>  
    8. <span>}</span><span>)</span><span>;</span>  
    9. <span>}</span><span>)</span><span>;</span>  
    10. <span></</span>script<span>></span>  
    11.    
    12. 上面列出了我认为常用的配置选项,此外还有很多参数可配置,参考官方文档  
  3. 通过调用相关功能函数,声明功能按钮。
    例如声明上传功能按钮(自动上传时不需要):
    <a href="javascript:$('#fileInput').fileUploadStart();">上传文件</a>

    声明取消多文件上传时上传队列:

    <a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上传队列</a>
    UploadHandler.ashx:
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.Services;  
    6. using System.IO;  
    7.   
    8. namespace
      • 上一篇:
      • 下一篇:

    本文地址:http://www.ask186.com/content/article/jquery/31998.html(转载请保留)

    相关关键词搜索:jquery,uploadify,用法

    发表评论
        
    * 以上用户言论只代表其个人观点,不代表www.ask186.com网站的观点或立场
推荐文档更多

WEB技术QQ交流群:151963186 站长Q号:547214413
版权所有者:编程入门教程 地址:云南省文山州砚山县盘龙乡 滇ICP备12002707号-1
特别声明:本站内容仅供参考,不作为设计及确切依据!想了解更多,可立即进入Bbs提问