ขอวิธี config ค่า jQuery.filer 1.0.3 เพื่อใช้ upload image ร่วมกับ mysql php หน่อยครับ
ลองเอา Code ส่วนที่มีปัญหามาแปะหน่อยครับ
Date :
2015-10-15 22:10:34By :
mr.win
Code (PHP) <!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>jQuery Filer 1.0.3 | CreativeDream</title>
<!--Stylesheets-->
<link href="css/jquery.filer.css" type="text/css" rel="stylesheet" />
<link href="css/themes/jquery.filer-dragdropbox-theme.css" type="text/css" rel="stylesheet" />
<!--jQuery-->
<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.filer.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#input1').filer();
$('.file_input').filer({
limit: 10,
maxSize: 900000,
extensions: null,
changeInput: true,
showThumbs: true,
appendTo: null,
showThumbs: true,
templates: {
box: '<ul class="jFiler-item-list"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: true,
removeConfirmation: true,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
addMore: true,
files: [{
name: "appended_file.jpg",
size: 5453111111,
type: "image/jpg",
file: "http://dummyimage.com/158x113/f9f9f9/191a1a.jpg",
},{
name: "appended_file_2.png",
size: 950311111,
type: "image/png",
file: "http://dummyimage.com/158x113/f9f9f9/191a1a.png",
}]
});
$('#input2').filer({
limit: null,
maxSize: 2000000,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
appendTo: null,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-item-list"></ul>',
item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-info">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<span class="jFiler-item-others">{{fi-icon}} {{fi-size2}}</span>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: false,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
uploadFile: {
url: "./php/upload.php",
data: {},
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: {},
onProgress: function(){},
},
dragDrop: {
dragEnter: function(){},
dragLeave: function(){},
drop: function(){},
},
addMore: true,
clipBoardPaste: true,
excludeName: null,
beforeShow: function(){return true},
onSelect: function(){},
afterShow: function(){},
onRemove: function(){},
onEmpty: function(){},
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
</script>
<style>
.file_input{
display: inline-block;
padding: 10px 16px;
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
white-space: nowrap;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
border-radius: 3px;
color: #008BFF;
border: 1px solid #008BFF;
vertical-align: middle;
background-color: #fff;
margin-bottom: 10px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.file_input:hover,
.file_input:active {
background: #008BFF;
color: #fff;
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>jQuery.filer 1.0.3</h1>
<p><a href="https://github.com/CreativeDream/jquery.filer">Download</a> | <a href="https://github.com/CreativeDream/jquery.filer">Documentation</a></p>
<hr />
<h3>Demo:</h3>
<div>
<form action="./php/upload.php" method="post" enctype="multipart/form-data">
<!-- filer 1 -->
<input type="file" multiple="multiple" name="files[]" id="input1">
<br>
<input type="submit">
</form>
</div>
<br>
<hr>
<br>
<div>
<form action="./php/upload.php" method="post" enctype="multipart/form-data">
<!-- filer 2 -->
<a class="file_input" data-jfiler-name="files" data-jfiler-extensions="jpg, jpeg, png, gif"><i class="icon-jfi-paperclip"></i> Attach a file</a>
<br>
<input type="submit">
</form>
</div>
<br>
<hr>
<br>
<div style="background: #f7f8fa;padding: 50px;">
<!-- filer 3 -->
<input type="file" multiple="multiple" name="files[]" id="input2">
</div>
<br>
<hr />
© 2015 <b>CreativeDream</b>. </body>
</html>
Code (PHP) <?php
include('class.uploader.php');
$uploader = new Uploader();
$data = $uploader->upload($_FILES['files'], array(
'limit' => 10, //Maximum Limit of files. {null, Number}
'maxSize' => 10, //Maximum Size of files {null, Number(in MB's)}
'extensions' => null, //Whitelist for file extension. {null, Array(ex: array('jpg', 'png'))}
'required' => false, //Minimum one file is required for upload {Boolean}
'uploadDir' => '../uploads/', //Upload directory {String}
'title' => array('auto', 10), //New file name {null, String, Array} *please read documentation in README.md
'removeFiles' => true, //Enable file exclusion {Boolean(extra for jQuery.filer), String($_POST field name containing json data with file names)}
'perms' => null, //Uploaded file permisions {null, Number}
'onCheck' => null, //A callback function name to be called by checking a file for errors (must return an array) | ($file) | Callback
'onError' => null, //A callback function name to be called if an error occured (must return an array) | ($errors, $file) | Callback
'onSuccess' => null, //A callback function name to be called if all files were successfully uploaded | ($files, $metas) | Callback
'onUpload' => null, //A callback function name to be called if all files were successfully uploaded (must return an array) | ($file) | Callback
'onComplete' => null, //A callback function name to be called when upload is complete | ($file) | Callback
'onRemove' => 'onFilesRemoveCallback' //A callback function name to be called by removing files (must return an array) | ($removed_files) | Callback
));
if($data['isComplete']){
$files = $data['data'];
print_r($files);
}
if($data['hasErrors']){
$errors = $data['errors'];
print_r($errors);
}
function onFilesRemoveCallback($removed_files){
foreach($removed_files as $key=>$value){
$file = 'uploads/' . $value;
if(file_exists($file)){
unlink($file);
unset($removed_files[$key]);
}
}
return $removed_files;
}
?>
Code public $error_messages = array(
1 => "The uploaded file exceeds the upload_max_filesize directive in php.ini.",
2 => "The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.",
3 => "The uploaded file was only partially uploaded.",
4 => "No file was uploaded.",
6 => "Missing a temporary folder.",
7 => "Failed to write file to disk.",
8 => "A PHP extension stopped the file upload.",
'accept_file_types' => "Filetype not allowed",
'file_uploads' => "File uploading option in disabled in php.ini",
'post_max_size' => "The uploaded file exceeds the post_max_size directive in php.ini",
'max_file_size' => "File is too big",
'max_number_of_files' => "Maximum number of files exceeded",
'required_and_no_file' => "No file was choosed. Please select one.",
'no_download_content' => "File could't be download."
ประวัติการแก้ไข
Date :
2015-10-15 22:29:52By :
basic111
ดัน ครับ อยาก ทราบเหมือนกัน
Date :
2015-11-21 12:28:25By :
โปรแกรมเมอร์หัดเขียน
Server 05
Load balance : Server 05
