600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > jquery uploadify 多文件上传插件 使用经验

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

时间:2019-07-14 20:15:49

相关推荐

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

独角兽企业重金招聘Python工程师标准>>>

Uploadify 官网:/

一、如何使用呢?

官网原文:/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库

<scriptsrc="/libs/jquery/1.9.1/jquery.min.js"></script>

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

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

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

<inputtype="file"name="file_upload"id="file_upload"/>

或是

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

6、初始化 Uploadify JS代码

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

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

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

8、创建上传文件夹

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

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

修改 uploadify.php 脚本使其上传目录为您创建的上传目录。

配套的 uploadify.php 脚本文件是不安全的,需要自己另外处理。

例如:如果你使用 CodeIgniter 框架的话,可以使用 上传 类库实现

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

完成!

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

<!doctypehtml><html><head><metacharset="utf-8"><title>Uploadify使用方法</title><linkrel="stylesheet"type="text/css"href="/js/uploadify/uploadify.css"/</head><body><inputtype="file"name="file_upload"id="file_upload"/><!--引用jQuery--><scriptsrc="/libs/jquery/1.9.1/jquery.min.js"></script><!--引用Uploadify--><scriptsrc="js/uploadify/jquery.uploadify-3.1.min.js"></script><script>$(function(){$('#file_upload').uploadify({'swf':'uploadify.swf','uploader':'uploadify.php'//Youroptionshere});});</script></body></html>

二、Uploadify 配置中文说明

1、选项

auto

类型: bool

默认: true

说明: 是否自动上传

swf

类型: string

默认: 'uploadify.swf'

必须: Yes

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

uploader

类型: string

默认: 'uploadify.php'

必须: Yes

说明: 服务端实现上传功能的脚本文件路径(相对于网站根目录的路径)

自定义服务端上传脚本:/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动态传递参数如何实现

等待补充

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。