发现网上很多人写的都好像是旧的方法，好像已经过时了……找了很久
在Change Log.txt中看的见版本
这个是我的v3.2.1- Updated uploadify.swf with security updates from secure swfupload.
自己写了一个，又找了别人的一个，贴上两个文件
这个是我自己写的，实现了 单个文件和多文件上传的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>uploadify多文件上传</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="uploadify/scripts/jquery.uploadify.js" ></script>
<script type="text/javascript">
$(function(){
$("#testFileInput").uploadify({
swf:'uploadify/scripts/uploadify.swf',
uploader:'../UploadUtil',
formData:{PHPSESSID:'xxx', ajax:1},
buttonText:'请选择文件',
fileSizeLimit:'200KB',
fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;',
fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',
auto:true,
multi:true
});
$("#testFileInput2").uploadify({
swf:'uploadify/scripts/uploadify.swf',
uploader:'../UploadUtil',
queueID:'fileQueue',
buttonImage:'uploadify/img/add.jpg',
buttonClass:'my-uploadify-button',
cancelImg: 'uploadify/img/cancel.jpg',
width:102,
auto:false,
multi:true
});
});
</script>
<link rel="stylesheet" type="text/css" href="uploadify/css/uploadify.css"/>
<style type="text/css" media="screen">
.my-uploadify-button {
background:none;
border: none;
text-shadow: none;
border-radius:0;
}
.uploadify:hover .my-uploadify-button {
background:none;
border: none;
}
.fileQueue {
width: 400px;
height: 150px;
overflow: auto;
border: 1px solid #E5E5E5;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>uploadify多文件上传</h2>
<input id="testFileInput" type="file" name="image" />
<div class="divider"></div>
<input id="testFileInput2" type="file" name="image2" />
<div id="fileQueue" class="fileQueue"></div>
<input type="image" src="uploadify/img/upload.jpg" οnclick="$('#testFileInput2').uploadify('upload', '*');"/>
<input type="image" src="uploadify/img/cancel.jpg" οnclick="$('#testFileInput2').uploadify('cancel', '*');"/>
</body>
</html>这个是别人写的，具体解释了参数的意义和使用方法，呃，已经很完整了，也可以自己再上网找找
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>uploadify 多文件上传例子</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.haha{
color:#FFFFFF;
}
#queue {
background-color: #FFF;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
height: 103px;
margin-bottom: 10px;
overflow: auto;
padding: 5px 10px;
width: 300px;
}
</style>
</head>
<body>
<h1>Uploadify Demo</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'debug' : false,
'auto' : true, //是否自动上传,
'buttonClass' : 'haha', //按钮辅助class
'buttonText' : '上传图片', //按钮文字
'height' : 30, //按钮高度
'width' : 100, //按钮宽度
//'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false
'fileObjName' : 'files', //默认 Filedata, $_FILES控件名称
'fileSizeLimit' : '1024KB', //文件大小限制 0为无限制 默认KB
'fileTypeDesc' : 'All Files', //图片选择描述
'fileTypeExts' : '*.gif; *.jpg; *.png',//文件后缀限制 默认：'*.*'
'formData' : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式
//'overrideEvents': ['onUploadProgress'], // The progress will not be updated
//'progressData' : 'speed', //默认percentage 进度显示方式
'queueID' : 'queue', //默认队列ID
'queueSizeLimit': 20, //一个队列上传文件数限制
'removeCompleted' : true, //完成时是否清除队列 默认true
'removeTimeout' : 3, //完成时清除队列显示秒数,默认3秒
'requeueErrors' : false, //队列上传出错，是否继续回滚队列
'successTimeout' : 5, //上传超时
'uploadLimit' : 99, //允许上传的最多张数
'swf' : 'uploadify.swf', //swfUpload
'uploader': 'uploadify.php', //服务器端脚本
//修改formData数据
'onUploadStart' : function(file) {
//$("#file_upload").uploadify("settings", "someOtherKey", 2);
},
//删除时触发
'onCancel' : function(file) {
//alert('The file ' + file.name + '--' + file.size + ' was cancelled.');
},
//清除队列
'onClearQueue' : function(queueItemCount) {
//alert(queueItemCount + ' file(s) were removed from the queue');
},
//调用destroy是触发
'onDestroy' : function() {
alert('我被销毁了');
},
//每次初始化一个队列是触发
'onInit' : function(instance){
//alert('The queue ID is ' + instance.settings.queueID);
},
//上传成功
'onUploadSuccess' : function(file, data, response) {
//alert(file.name + ' | ' + response + ':' + data);
},
//上传错误
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
//alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
},
//上传汇总
'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
$('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
},
//上传完成
'onUploadComplete' : function(file) {
//alert('The file ' + file.name + ' finished processing.');
},
});
});
//变换按钮
function changeBtnText() {
$('#file_upload').uploadify('settings','buttonText','继续上传');
}
//返回按钮
function returnBtnText() {
alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
</script>
<h4>操作:</h4>
<a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a> |
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a> |
<a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a> |
<a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a> |
<a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a> |
<a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a> |
<a href="javascript:changeBtnText();">变换按钮</a> |
<h4>大小:</h4>
<div id='progress'></div>
</body>
</html>
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
