upload.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>uploadify 多文件上傳例子</title>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
<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' : false, //是否自動上傳,
'buttonClass' : 'haha', //按鈕輔助class
'buttonText' : '上傳圖片', //按鈕文字
'height' : 30, //按鈕高度
'width' : 100, //按鈕寬度
'fileObjName' : 'filedata', //默認 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/uploadify.swf', //swfUpload
'uploader': 'handle.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);
$('#error').html(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>
<h4>錯誤提示:</h4>
<div id='error'></div>
</body>
</html>
handle.php
<?php if(@$_FILES["filedata"]){ $path="upload/" . $_FILES["filedata"]["name"]; //把上傳的文件移動到指定目錄 move_uploaded_file($_FILES["filedata"]["tmp_name"],$path); } ?>
效果：
