Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > ขอวิธี config ค่า jQuery.filer 1.0.3 เพื่อใช้ upload image ร่วมกับ mysql php หน่อยครับ

ขอวิธี config ค่า jQuery.filer 1.0.3 เพื่อใช้ upload image ร่วมกับ mysql php หน่อยครับ

เริ่มหัวข้อใหม่

basic111

โพสกระทู้ ( 72 )
บทความ ( 0 )

จากลิงค์นี้ครับ https://github.com/CreativeDream/jquery.filer

คือจะให้มัน upload เข้า folder และส่งค่าเข้า mysql กับ PHP

ลองโหลดมาลองดูแล้ว มันแจ้งว่า Array ( [0] => Array ( [0] => Maximum number of files exceeded ) )

และก็ไม่มีไฟล์ภาพเข้าไปใน folder ชื่อ uploads

ติดมาหลายวันแล้ว ไม่ทราบว่า มันต้อง config ค่าตรงไหนบ้าง อ่านดูแล้วไม่ค่อยจะเข้าใจ

ขอบพระคุณล่วงหน้า มากๆ ครับ

Tag : PHP, MySQL, Ajax, jQuery

Date : 2015-10-14 11:00:18

By : basic111

View : 1601

Reply : 3

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

ลองเอา Code ส่วนที่มีปัญหามาแปะหน่อยครับ

Date : 2015-10-15 22:10:34

By : mr.win

No. 2

basic111

โพสกระทู้ ( 72 )
บทความ ( 0 )

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 /> 
    &copy; 2015 <b>CreativeDream</b>. </body>
</html>

--------------------------------------------------------------
^
^
ด้านบนนี้เป็นส่วน index.html เมื่อกด submit ส่งค่าไปยัง folder ชื่อ php >> upload.php

---------------------------------------------------------------

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 >> upload.php ซึ่งมีการ include('class.uploader.php'); เข้ามาด้วย

---------------------------------------------

ผมได้ echo Debug ดู แจ้ง Error Array ( [0] => Array ( [0] => Maximum number of files exceeded ) ) จากตรงนี่้ครับ

if($data['isComplete']){
$files = $data['data'];
print_r($files);
}

----------------------------------------------

โดยข้อความแจ้ง Error มาจาก ไฟล์ class.uploader.php

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."

ขอความกรุณาด้วยครับ

ประวัติการแก้ไข
2015-10-15 22:31:35

Date : 2015-10-15 22:29:52

By : basic111

No. 3

Guest

ดัน ครับ อยาก ทราบเหมือนกัน

Date : 2015-11-21 12:28:25

By : โปรแกรมเมอร์หัดเขียน

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ขอวิธี config ค่า jQuery.filer 1.0.3 เพื่อใช้ upload image ร่วมกับ mysql php หน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก