uploadify多文件上传插件的使用帮助

来源:互联网 发布:重庆市干部网络培训 编辑:程序博客网 时间:2024/04/25 10:20
uploadify使用帮助:


官网下载uploadify插件
http://www.uploadify.com/download


插件要求环境:
1)jQuery 1.4.x 以上
2)Flash Player 9.0.24 以上(新版Chrome不支持)


解压后文件列表
1)jquery.uploadify.min.js
2)uploadify.php
3)uploadify.swf
4)uploadify.css
5)uploadify-cancel.png
6)check-exists.php (检查目标文件夹中的现有文件)


在页面中部署
1)引入jQuery文件
  <script src="jquery.min.js"></script>
2)引入jquery.uploadify.min.js文件
  <script src='/uploadify/jquery.uploadify.min.js'></script>
3)引入样式表
  <link rel="stylesheet" href="/uploadify/uploadify.css">
4)在页面中增加文件上传框
  <input type="file" name="" id="file">
5)初始化文件上传框
<script>
$(function() {
   $('#file').uploadify({
       'swf'      : '/uploadify/uploadify.swf',
       'uploader' : '/uploadify/uploadify.php'
      //参数
   });
});
</script>
6)建立文件上传路径,修改uploadify.php中的上传路径
去掉其中的
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
和条件里的
&& $_POST['token'] == $verifyToken
不影响插件运行


至此完成插件部署


参数设置


Options
auto   //ture or false   默认true
#如果您不希望文件在添加到队列时自动上载,则将其设置为false。如果设置为false,则可以使用上载方法触发上载。
buttonClass  //给上传按钮添加一个类名 默认为空
buttonCursor  //鼠标悬停在上传按钮上的样式 默认hand 可以设置为arrow
buttonImage   //要用作浏览按钮背景的图像的路径。如果使用默认样式,您可以通过在图像悬停状态之上叠加关闭状态来创建按钮的悬停状态。这个选项是一个方便的选项,将图像分配给按钮的最好方法是在CSS文件中。
#详细代码见手册http://www.uploadify.com/documentation/uploadify/buttonimage/
buttonText   //按钮文本(与buttonImage不要共同使用)
checkExisting   //文件的路径,该文件检查当前上载的文件的名称是否存在于目标文件夹中。如果文件名存在,则该脚本返回1,如果文件名不存在,则返回0。(配合check-exists.php使用)
debug   //设置为true打开swfupload调试模式(默认为false)
fileObjName   //设置$_FILE['']接收文件的名字(一般不设即可)
fileSizeLimit  //设置上传文件限制大小(此值可以是数字或字符串。如果它是一个字符串,它接受一个单位(b,KB,MB,或GB)。默认单位是KB。您可以将此值设置为0,不设限制)
fileTypeDesc  //无实际用处
fileTypeExts  //可以上传的允许扩展列表,多个类型用分号隔开(如:*.jpg;*.png;*.gif)
formData   //表单数据(后期再说)
height  //按钮的高,单位是px 默认30
itemTemplate  //ItemTemplate选项允许你指定一个特殊的每一项的HTML模板,添加到队列。
method //提交上传的方式get或者post 默认post
multi  //允许上传多个或者1个 true|false  默认true 
overrideEvents  //覆盖原有事件,可以对其进行重写
preventCaching //如果设置为true,则在SWF文件URL中添加一个随机值,这样它就不会缓存。
progressData  //设置在文件上载进度更新期间在队列项中显示什么类型的数据。这两种选择是“百分比”或“速度”。默认percentage    percentage|speed
queueSizeLimit  //队列限制个数(默认999,不限制文件上传个数)
removeCompleted  //设置为false以保存已在队列中完成上传的文件。(设为false后,进度条不会自动消失) 默认为true
removeTimeout //从队列中删除完成上传前几秒钟的延迟。默认3秒
requeueErrors  //如果设置为true,返回错误的文件在上传,上传requeued反复尝试。默认false


successTimeout //当文件完成上传时等待服务器响应的时间(秒)。经过这段时间,SWF文件将成功。
swf  //swf文件的路径
uploader //处理文件上传的php文件路径


uploadLimit //允许上传的文件的最大数量。当这个数量达到或超过了onuploaderror,事件触发。
width  //上传按钮宽


几个重要的参数
buttonText
fileObjName
fileSizeLimit
fileTypeExts
multi
swf  //swf文件的路径
uploader //处理文件上传的php文件路径
uploadLimit  //限制文件上传的个数否则会触发onuploaderror事件


======================================================================
Events事件
onCancel取消事件
'onCancel':function(file){
alert('The file ' + file.name + ' was cancelled.');
}
onClearQueue清除列表事件
'onClearQueue' : function(queueItemCount) {
            alert(queueItemCount + ' file(s) were removed from the queue');
        } 
onUploadSuccess文件上传成功时触发
'onUploadSuccess' : function(file, data, response) {
            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
        }


onDestroy在调用销毁方法时触发该事件(不再使用uploadify的场景)
例子:
'onDestroy':function(){
alert('123');
},


$('button').click(function(){
// $('#file').uploadify('upload');
$('#file').uploadify('destroy');
});


onDialogClose 浏览文件对话框关闭时触发(需要重新写)
例子:参考官网例子
'overrideEvents':[ 'onDialogClose' ],
'onDialogClose':function(queueData){
alert(queueData.filesQueued+'个文件在队列中');
}


onDialogOpen在浏览文件对话框打开之前立即触发
'onDialogOpen':function(){
alert('123');
}
onDisable调用disable方法禁用uploadify时触发
$('#file').uploadify('disable',true);


'onDisable':function(){   
            alert('你已经禁用Uploadify');
        }
onEnable调用disable方法启用uploadify时触发
$('#file').uploadify('disable',false);


'onEnable':function(){   
            alert('你已经启用Uploadify');
        }
onFallback如果在浏览器中未检测到兼容版本的Flash,则在初始化期间触发。
'onFallback' : function() {
            alert('Flash was not detected.');
        }


onInit在首次调用Uploadify时,初始化结束时触发。
'onInit' :function (instance ){     
            警报('的队列ID是' + 实例。设置。queueID );  
        }


onQueueComplete当处理队列中的所有文件完成时触发。
'onQueueComplete' : function(queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }


onSelect对于从浏览文件对话框中选择并添加到队列中的每个文件触发。
'onSelect':function(file){
alert(file.name+'添加到队列');
console.log(file);
}


onSelectError在选择文件时返回错误时触发。
onSWFReady当Flash对象加载并准备就绪时触发。
onUploadComplete当上传完成时,无论是成功还是返回错误,每个文件触发一次。
'onUploadComplete' : function(file) {
            alert('The file ' + file.name + ' finished processing.');
        }


onUploadError当文件上传但返回错误时触发
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
        }


onUploadProgress每次更新文件上传的进度时触发。
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
            $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
        }


onUploadStart当文件开始上传时触发
'onUploadStart' : function(file) {
            alert('Starting to upload ' + file.name);
        }
原创粉丝点击