[jQuery] Upload File Plugin
如何使用
1) head 要引用 uploadfile.css、jquery.min.js、jquery.uploadfile.min.js2) body 要建立一個div，並給予ID名稱
3) script 呼叫這個ID名稱，並給予需要參數
參考 ☞ jQuery Multiple File Upload with Progress bar Tutorial
Sample Code
〔下載我的範例〕index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/uploadfile.mine.css">
<script src="assets/jquery.min.js"></script>
<script src="assets/jquery.uploadfile.js"></script>
</head>
<body>
<div id="extraupload">Upload</div>
<div id="extrabutton" class="ajax-file-upload-green">開始上傳</div>
<script>
$(document).ready(function() {
var extraObj = $("#extraupload").uploadFile( {
url : "upload.php",
fileName : "myfile",
showFileCounter: false,
autoSubmit : false
});
$("#extrabutton").click(function() {
extraObj.startUpload();
});
});
</script>
</body>
</html>
upload.php
<?php
$output_dir = "uploads/";
if(isset($_FILES["myfile"]))
{
$ret = array();
// This is for custom errors;
/* $custom_error= array();
$custom_error['jquery-upload-file-error']="File already exists";
echo json_encode($custom_error);
die();
*/
$error =$_FILES["myfile"]["error"];
//You need to handle both cases
//If Any browser does not support serializing of multiple files using FormData()
if(!is_array($_FILES["myfile"]["name"])) //single file
{
$fileName = $_FILES["myfile"]["name"];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);
$ret[]= $fileName;
}
else //Multiple files, file[]
{
$fileCount = count($_FILES["myfile"]["name"]);
for($i=0; $i < $fileCount; $i++)
{
$fileName = $_FILES["myfile"]["name"][$i];
move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName);
$ret[]= $fileName;
}
}
echo json_encode($ret);
}
?>
jQuery Upload File API
☞ jQuery Upload File Plugin DemojQuery Upload File Source Code
☞ jquery-upload-file☞ 參數總覽
☞ 參數總覽2
尋找更多 File upload
☞ jQuery Bootstrap File Input Plugin☞ jQuery Plugins Tagged ‘multiple file upload’
☞ Ajax Uploader
☞ jQuery MultiFile ★
☞ jQuery Multiple File Upload Plugin
☞ jQuery Plugin For Selecting Multiple Files - multifile ★
沒有留言: