文档章节

jquery uploadify 多文件上传插件 使用经验

lixiaokai2008
 lixiaokai2008
发布于 2014/12/26 10:18
字数 1353
阅读 951
收藏 10

Uploadify 官网:http://www.uploadify.com/


一、如何使用呢?

官网原文:http://www.uploadify.com/documentation/uploadify/implementing-uploadify/
在我理解的基础上,做了一些翻译吧,建议直接看官网原文,因为截止到发布这篇博客为止,官方的版本是v3.2.1
使用之前我们来看下使用的最低要求。

要求

jQuery 1.4.x 或更新的版本
Flash Player 9.0.24 或更新的版本
服务器端实现文件上传的功能(PHP、JAVA等),也就是需要配合服务器端实现使用。

使用

按照下面最基本的步骤来实现uploadify上传功能

1、下载免费Uploadify Zip Package 安装包

2、解压并上传以下文件到你网站上的一个文件夹(例如:/js/uploadify)

jquery.uploadify-3.1.min.js
uploadify.php (服务端处理上传的文件)
uploadify.swf
uploadify.css
uploadify-cancel.png
check-exists.php

3、在前端页面引用 jQuery JS库

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

4、在jquery库下面引用 Uploadify JS库

<script src="js/uploadify/jquery.uploadify-3.1.min.js"></script>

5、布置上传按钮(可以是任意的标签元素,只要确保ID的存在)

<input type="file" name="file_upload" id="file_upload" />

或是

<a id="file_upload" href="#">上传</a>

6、初始化 Uploadify JS代码

$(function() {
    $('#file_upload').uploadify({
        'swf'      : '/js/uploadify/uploadify.swf',
        'uploader' : '/js/uploadify/uploadify.php'
        // 其他配置参数或方法
    });
});

7、在文件头部引入CSS文件,实现一些漂亮的显示效果(也可以自己修改)

<link rel="stylesheet" type="text/css" href="/js/uploadify/uploadify.css" /

8、创建上传文件夹

在你的服务器上创建上传文件夹(例如:/uploads)并给它适当的权限(0755)

9、修改服务端上传的文件

修改 uploadify.php 脚本使其上传目录为您创建的上传目录。
配套的 uploadify.php 脚本文件是不安全的,需要自己另外处理。
例如:如果你使用 CodeIgniter 框架的话,可以使用 上传 类库实现

10、看看 让uploadify更安全 的文章

完成!

最后把前端的完成html贴出来

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Uploadify 使用方法</title>
<link rel="stylesheet" type="text/css" href="/js/uploadify/uploadify.css" /
</head>
<body>

<input type="file" name="file_upload" id="file_upload" />

<!-- 引用jQuery -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- 引用Uploadify -->
<script src="js/uploadify/jquery.uploadify-3.1.min.js"></script>
<script>
$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // Your options here
    });
});
</script>
</body>
</html>


二、Uploadify 配置中文说明

1、选项
auto
类型: bool
默认: true
说明: 是否自动上传

swf
类型: string
默认: 'uploadify.swf'
必须: Yes
说明: uploadify.swf 文件路径,为了尽量避免问题的产生,建议使用相对于网站根目录的路径(尽管它也支持相当于当前目录)

uploader
类型: string
默认: 'uploadify.php'
必须: Yes
说明: 服务端实现上传功能的脚本文件路径(相对于网站根目录的路径)
      自定义服务端上传脚本:http://www.uploadify.com/documentation/uploadify/customizing-the-server-side-upload-script/

buttonClass
类型: string
默认: ''
必须: Yes
说明: 上传按钮添加额外的class

buttonCursor
类型:
默认:
说明:

buttonImage
类型: string
默认: null
说明: 上传按钮使用一张图片代替

buttonText
类型: string
默认: 'SELECT FILES'
说明: 按钮显示的文字

checkExisting
类型: string
默认: false
说明: 上传时检查上传的文件是否已存在,开启的话,存在时返回1,不存在则返回0

debug
类型: bool
默认: false
说明: 是否开启debug,开启后会在body的结束处生成一段html,显示 ---SWFUpload Instance Info---

fileObjName
类型: string
默认: 'Filedata'
说明: 表单中上传字段的name值(<input type="file" name="Filedata" id="file_upload" />)
      例如: php上传时 $_FILES['Filedata'] 获取的 key 值

fileSizeLimit
类型: int | string
默认:
说明: 允许上传的文件大小,如果设置为0表示不限制。该值允许为数字或字符串
      如果是字符串则后缀允许为(B, KB, MB, GB) 例如: 2MB
      如果是数字则默认为KB

fileTypeDesc
类型: string
默认: 'All Files'
说明: 点击上传按钮后,弹出的选择窗口中的选择文件类型的提示内容,如果设置为 'Any old file you want...'
fileTypeExts
类型: string
默认: '*.*'
说明: 允许上传的文件后缀
      例如: '*.gif; *.jpg; *.jpeg; *.png'

formData
类型:
默认:
说明:

width
类型: int
默认: 120
说明: 按钮显示的宽度, 不能在后面使用 'px' , 改值仅可使用数字

height
类型: int
默认: 30
说明: 按钮显示的高度

itemTemplate
类型:
默认:
说明:

method
类型: string
默认: 'post'
说明: 上传时的提交方式,该值仅可以是 'post' 或 'get'

multi
类型: bool
默认: true
说明: 是否开启多文件上传

overrideEvents
类型:
默认:
说明:

preventCaching
类型:
默认:
说明:

progressData
类型:
默认:
说明:

queueID
类型:
默认:
说明:

queueSizeLimit
类型:
默认:
说明:

removeCompleted
类型:
默认:
说明:

removeTimeout
类型:
默认:
说明:

requeueErrors
类型:
默认:
说明:

successTimeout
类型:
默认:
说明:

uploadLimit
类型:
默认:
说明:




三、我觉得必须要知道的Uploadify的事情

1、Uploadify 是使用Flash技术实现多文件上传的,免费的

2、Uploadify 作者还出了一个使用HTML5技术实现的多文件上传插件 UploadiFive ,但是收费(5刀)

3、Uploadify 自3.1起把 Uploadify 和 SWFUpload 合并成一个JS文件 jquery.uploadify-3.1.min.js

4、Uploadify 上传提交到服务端时使用的方法不是 AJAX, 而是POST或GET,可通过 method 参数 配置,如果亲知道如何使用AJAX请求提交麻烦告诉我哦

5、uploadify动态传递参数如何实现

等待补充

© 著作权归作者所有

lixiaokai2008
粉丝 14
博文 100
码字总数 20933
作品 0
中山
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.6K
9
7 款 JavaScript 的 Ajax 文件上传插件

jQuery File Upload jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端...

oschina
2012/05/09
26.2K
13
基于jQuery很牛X的批量上传插件

上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件...

voole
2013/11/16
15.9K
0
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
270
0
Struts2+Uploadify实现文件上传

Uploadify是一款很不错的多文件上传jQuery插件,可以为你的网站添加多文件上传功能。 其主要特色是: 1、允许用户一次性选择多个需要上传的文件而无需多次打开文件选择窗口。 2、支持拖拽上传...

一条大河波浪宽
2013/09/28
2K
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部