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

星期六 下午 16:52 狂奔的蜗牛 PHP开发 14473 views
0
Comments

demo.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta charset="utf-8">

<title>Uploadify--demo</title>

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

<script src="jquery.min.js"></script>

<script src="jquery.uploadify.v2.1.4.min.js"></script>

<script src="swfobject.js"></script>

<script src="json2.js"></script>

<script>

$(function(){

//每次上传文件过程的各种信息的存储容器,存储生存周期是从选择文件到下次选择文件

var responseDataObjContainer=[],queueIdObjContainer=[],fileObjContainer=[],dataObjContainer=[];

$('#file_upload').uploadify({

'uploader'  : 'uploadify.swf',

'script'    : 'upload.php?kind=type_2',

'fileDataName':'upfiledata',//就是<input type="file" name="upfiledata" />

'cancelImg' : 'cancel.png',//取消按钮的小图片

'wmode'     : 'transparent',//flash透明

'hideButton': true,//隐藏按钮 必须设置flash透明,

//隐藏的目的是自己可以弄个图片按钮做背景,防止中文乱码 如果直接设置buttonText为中文会出现乱码

//设置背景的CSS #file_uploadUploader {background: url('bag.gif') no-repeat;}

//#file_uploadUploader就是动态生成的flash的id

'width'     :60,//flash宽 由于设置的背景图片的宽是60 高是22 所以这里和下面设置60 22

'height'    :22,//flash高

'queueID'   :'myinfo',//上传提示信息的层的id,默认是 file_uploadQueue

//如果不想显示提示把提示层的display设为none

'queueSizeLimit':2,//当设置允许同时选择多个上传时,设置最大的文件数

'sizeLimit':1024*1024*1,//单位bit

'displayData': 'percentage',//显示进度提示为百分比 还可以是速度 speed

'multi'      :true,//是否允许同时选择多个文件上传

'removeCompleted':false,//上传完成是否隐藏提示信息

'fileExt'     : '*.jpg;*.gif;*.png',//允许的扩展名默认*.*

'fileDesc'    : '图片文件(*.jpg;*.gif;*.png)',//文件选择对话框扩展名下面的提示信息

'onComplete':function(event,queueId,fileObj,response,data){//每个文件上传完成时执行的函数 response是服务器返回的数据

var _msg=eval("("+response+")");

queueIdObjContainer.push(queueId);

fileObjContainer.push(fileObj);

responseDataObjContainer.push(_msg);

dataObjContainer.push(data);

//hint("#hint",info);

},

'onAllComplete':function(event,data){//所有上传完成执行的函数 response是服务器返回的数据

var info='';

for(var i=0;i<responseDataObjContainer.length;i++){//当一次上传操作完成时,处理各种数据

info+=responseDataObjContainer[i].msg+JSON.stringify(dataObjContainer[i])+'<br/>';

}

hint("#hint",info);

},              

'onError':function(event,queueId,fileObj,errorObj){//上传发生错误执行的函数

hint("#hint",errorObj.type+":"+errorObj.info);

},

'onSelectOnce' : function(event,data) {//每选择一次文件就触发该函数

responseDataObjContainer=[];

},

'auto'      : true  //选择完文件后,是否自动上传文件

});

});//end ready

function hint(slector,str){$(slector).html(str);}

</script>

</head>

<body>

<input id="file_upload" name="file_upload" type="file" /><a href="#" onclick="$('#file_upload').uploadifyUpload();">clickStartUpload</a><br/>

<span id="hint"></span>

<div id="myinfo"></div>

</body>

</html>

程序下载:uploadify

运行截图:

uploadify中文API:

属性:

uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。 
script :   后台处理程序的相对路径 。默认值:uploadify.php 
checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 
method : 提交方式Post 或Get 默认为Post 
scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain  
folder :  上传文件存放的目录 。 
queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。 
queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。 
multi : 设置为true时可以上传多个文件。 
auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。 
fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,

fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。 
sizeLimit : 上传文件的大小限制 。 
simUploadLimit : 允许同时上传的个数 默认值:1 。 
buttonText : 浏览按钮的文本,默认值:BROWSE 。 
buttonImg : 浏览按钮的图片的路径 。 
hideButton : 设置为true则隐藏浏览按钮的图片 。 
rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。 
width : 设置浏览按钮的宽度 ,默认值:110。 
height : 设置浏览按钮的高度 ,默认值:30。 
wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。 

cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标

面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

事件:

onInit : 做一些初始化的工作。

onSelect :选择文件时触发,该函数有三个参数

  • event:事件对象。
  • queueID:文件的唯一标识,由6为随机字符组成。
  • fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性   

onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象有以下几个属性:

  • fileCount:选择文件的总数。
  • filesSelected:同时选择文件的个数,如果一次选择了3个文件该属性值为3。
  • filesReplaced:如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。
  • allBytesTotal:所有选择的文件的总大小。

 

onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数,前三个参数同onSelect 中的三个参数,data对象有两个属性fileCount和allBytesTotal。

  • fileCount:取消一个文件后,文件队列中剩余文件的个数。
  • allBytesTotal:取消一个文件后,文件队列中剩余文件的大小。

 

onClearQueue :当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel 中的两个对应参数。

onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。

  • type:错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’
  • info:错误的描述

 

onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数,参数的解释同上。

onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列,在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数,前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed:

  • percentage:当前完成的百分比
  • bytesLoaded:当前上传的大小
  • allBytesLoaded:文件队列中已经上传完的大小
  • speed:上传速率 kb/s

 

onComplete:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed

  • fileCount:剩余没有上传完成的文件的个数。
  • speed:文件上传的平均速率 kb/s

注:fileObj对象和上面讲到的有些不太一样,onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。

 

onAllComplete:文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,分别为:

  • filesUploaded :上传的所有文件个数。
  • errors :出现错误的个数。
  • allBytesLoaded :所有上传文件的总大小。
  • speed :平均上传速率 kb/s

方法:

.uploadify()

Create an instance of the Uploadify uploader.

.uploadifyCancel()

Remove a file from the queue. If the upload is in progress, this will cancel the upload and remove the file from the queue.

.uploadifyClearQueue()

Remove all files from the file upload queue and cancel any file uploads that are in progress.

.uploadifySettings()

Change the options for an Uploadify instance.

.uploadifyUpload()

Trigger the file upload.

官方文档地址:http://www.uploadify.com/documentation/

英文API:

Options

auto

Automatically upload files as they are added to the queue.

(string)

buttonImg

The path to an image you would like to use as the browse button.

(string)

buttonText

The text that appears on the default button.

(string)

cancelImg

The path to an image you would like to use as the cancel button.

(string)

checkScript

The path to the back-end script that checks for pre-existing files on the server.

(string)

displayData

The type of data to display in the queue item during an upload.

(string)

expressInstall

The path to the expressInstall.swf file.

(string)

fileDataName

The name of your files array in the back-end script.

(string)

fileDesc

The text that will appear in the file type drop down at the bottom of the browse dialog box.

(string)

fileExt

A list of file extensions that are allowed for upload.

(string)

folder

The path to the folder where you want to save the files.

(integer)

height

The height of the browse button.

(boolean)

hideButton

Enable to hide the flash button so you can style the underlying DIV element.

(string)

method

The form method for sending scriptData to the back-end script.

(boolean)

multi

Allow multiple file uploads.

(string)

queueID

The ID of the element on the page you want to use as your file queue.

(integer)

queueSizeLimit

The limit of files that can be in the queue at one time.

(boolean)

removeCompleted

Enable automatic removal of the queue item for completed uploads.

(boolean)

rollover

Enable to activate rollover states for your browse button.

(string)

script

The path to the back-end script that will process the file uploads.

(string)

scriptAccess

The access mode for scripts in the main swf file.

(JSON object with mixed types)

scriptData

An object containing name/value pairs with additional information that should be sent to the back-end script when processing a file upload.

(integer)

simUploadLimit

The limit of uploads that can run simultaneously per Uploadify instance.

(integer)

sizeLimit

The size limit in bytes for each file upload.

(string)

uploader

The path to the uploadify.swf file.

(integer)

width

The width of the browse button.

(string)

wmode

The wmode of the flash file.

(function)

Triggers once when all files in the queue have finished uploading.

(function)

onCancel

Triggers once for each file that is removed from the queue.

(function)

onCheck

Triggers at the beginning of an upload if a file with the same name is detected.

(function)

onClearQueue

Triggers once when the uploadifyClearQueue() method is called.

(function)

onComplete

Triggers once for each file upload that is completed.

(function)

onError

Triggers when an error is returned for a file upload.

(function)

onInit

Triggers when the Uploadify instance is loaded.

(function)

onOpen

Triggers once when a file in the queue begins uploading.

(function)

onProgress

Triggers each time the progress of a file upload changes.

(function)

onQueueFull

Triggers when the number of files in the queue matches the queueSizeLimit.

(function)

onSelect

Triggers once for each file that is added to the queue.

(function)

onSelectOnce

Triggers once each time a file or group of files is added to the queue.

(function)

onSWFReady

Triggers when the flash file is done loading.

Methods

.uploadify()

Create an instance of the Uploadify uploader.

.uploadifyCancel()

Remove a file from the queue. If the upload is in progress, this will cancel the upload and remove the file from the queue.

.uploadifyClearQueue()

Remove all files from the file upload queue and cancel any file uploads that are in progress.

.uploadifySettings()

Change the options for an Uploadify instance.

2013/05/31 09:54:02
评论(0)
没有评论!

发表评论

引用成功取消引用×

昵称*: 邮箱*: 网址:

最多可输入300字符 验证码*:


Process: 0.057s | DB :17 queries | UseMem:2,312 kb