zoukankan      html  css  js  c++  java
  • 基于JQuery的上传插件Uploadify

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

    0938540

    简介

    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.引用了插件文件后,在页面中做如下调用:

    1. //声明一个普通的html文件上传控件,并指定id< span>inputtype="file"name="fileInput"id="fileInput"/<
    1. //将声明的普通上传控件与Uploadify插件绑定 
    2. < span>scripttype="text/javascript"<
    3. $(document).ready(function() { 
    4. $('#fileInput').fileUpload ({ 
    5. //以下参数均是可选 
    6. 'uploader'  : 'uploader.swf',   //指定上传控件的主体文件,默认‘uploader.swf’ 
    7. 'script'    : 'upload.php',       //指定服务器端上传处理文件,默认‘upload.php’ 
    8. 'cancelImg' : 'cancel.png',   //指定取消上传的图片,默认‘cancel.png’ 
    9. 'auto'      : true,               //选定文件后是否自动上传,默认false 
    10. 'folder'    : '/uploads'         //要上传到的服务器路径,默认‘/’ 
    11. 'multi'     : true,               //是否允许同时上传多文件,默认false 
    12. 'fileDesc' : 'rar文件或zip文件'  //出现在上传对话框中的文件类型描述 
    13. 'fileExt'   : '*.rar;*.zip',      //控制可上传文件的扩展名,启用本项时需同时声明fileDesc 
    14. 'sizeLimit': 86400           //控制上传文件的大小,单位byte 
    15. 'simUploadLimit' :5         //多文件上传时,同时上传文件数目限制 
    16. }); 
    17. }); 
    18. </>script<
    19. 上面列出了我认为常用的配置选项,此外还有很多参数可配置,参考官方文档

    3.通过调用相关功能函数,声明功能按钮。
    例如声明上传功能按钮(自动上传时不需要):

    1. < span>ahref="javascript:$('#fileInput').fileUploadStart();"<上传文件</>a<
    声明取消多文件上传时上传队列:
    1. < span>ahref="javascript:$('#fileInput').fileUploadClearQueue();"<取消上传队列</>a<

    其它说明

    官方只提供了php版本的服务器端处理文件,由于我平时的工作使用.net,下面提供一个我写的.NET C#版的处理文件:
    点击下载C#版处理文件

    原文链接:http://kb.cnblogs.com/page/53693/

    【小编推荐】

    1.使用jQuery设计数据表格之设计表格基类

    2.jQuery设计思想

    3.20个最新jQuery插件震撼登场(多图)

    4.jQuery中10个强大的遍历函数

    5.jQuery实现表格数据的动态添加与统计

    高质量的代码就是对程序自己最好的注释。当你打算要添加注释时,问问自己,“我如何能改进编码以至于根本不需要添加注释?”改进你的代码,然后才是用注释使它更清楚。
  • 相关阅读:
    Shodan在渗透测试及漏洞挖掘中的一些用法
    QUdpSocket 简单用法
    用QT操作数据库(本周学的)
    Qt使用UDp通信、套接字socket的成员函数bind()的作用
    ppm的含义
    数字的补数
    两数之和
    C++中的最大整数最小整数
    如何使用dockerfile将jar包生成镜像
    python3解决 json.dumps中文乱码
  • 原文地址:https://www.cnblogs.com/endy-blog/p/3612239.html
Copyright © 2011-2022 走看看