ขอสอบถามเรื่อง input file ค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอสอบถามเรื่อง input file ค่ะ

ขอสอบถามเรื่อง input file ค่ะ

คือตอนนี้ได้นำโค้ดมาประยุกต์จากเว็บนี้นะค่ะ http://plugins.krajee.com/file-input/demo#ajax-uploads แล้วผลปรากฎว่า validate แจ้งว่า error ตลอดเลยค่ะ เป็นแบบนี้ค่ะ ไม่เป็นไปตามตัวอย่างในเว็บไซต์เลยค่ะ ถ้าอัพโหลดถูกไฟล์ มันจะ success ค่ะ แต่อันนี้ลองทำทั้งอัพลงดาต้าเบสก็แล้ว ก็ยังขึ้นเป็นสีแดงค่ะ ไม่รู้ต้องไปตั้งค่าตรงไหนส่วนไหนค่ะ แต่รูปพออัพลงดาต้าเบส อัพลงนะค่ะ แต่ก็ยังเป็นสีแดงๆอยู่ค่ะ

และส่วนอันนนี้เป็นโค้ดด้าน index.php ค่ะ

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Fuck yeah</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/fileinput.min.css">

</head>
<body>
	<section id="inv-body" class="center-block">

		<div id="pedido" class="">

			<form id="ticketec" class="" method="post" enctype="multipart/form-data">
				<h4>Adjunta tu ticket <span class="glyphicon glyphicon-question-sign"></span></h4>
				<input type="hidden" name="server" value="logged-user-server"></input>
				<input type="hidden" name="user" value="logged-user"></input>
				<div class="form-group">
					<input id="images" name="images[]" type="file" multiple>
					<div id="errorBlock43" class="help-block"></div>
				</div>
				<!--<input type="hidden" name="ticketenviado" value="si"></input>-->
                <input id="userid" name="userid" type="hidden">
                <input id="username" name="username" type="text">
		  		<button type="submit" class="btn btn-danger center-block">Enviar</button>
			</form>

			<!--<form id="confirm" class="hidden" method="GET">

			</form>-->

		</div>
	</section>

</div>

<script src="js/fileinput.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/fileinput.js"></script>
<script src="js/bootstrap.min.js"></script>


<script>
$(document).ready(function() {
	// Disable preview and customize your own error container and messages.
$("#images").fileinput({
    //showPreview: false,
	browseClass: "btn btn-danger btn-block",
	showCaption: true,
	showRemove: true,
	showUpload: true,
	previewFileType: "image",
	browseLabel: "เลือกรูป",
	browseIcon: '<i class="glyphicon glyphicon-picture"></i>',
    allowedFileExtensions: ["jpg", "JPG", "jpeg", "JPEG", "png", "PNG", "pdf"],
    elErrorContainer: "#errorBlock43",
    msgInvalidFileExtension: 'El formato de "{name}" es incorrecto. Solo archivos "{extensions}" son admitidos.',
    // you can configure `msgErrorClass` and `msgInvalidFileExtension` as well
    //AJAX
        dropZoneEnabled: false,
        uploadAsync: false,
        uploadUrl: "subir.php", // your upload server url
        uploadExtraData: function() {
            return {
               userid: $("#userid").val(),
                username: $("#username").val()
            };
        }
});

});
</script>
</body>
</html>

และส่วนอันนี้เป็น subir.php เพื่อทำการอัพโหลดไฟล์ค่ะ

<?
// upload.php
// 'images' refers to your file input name attribute
if (empty($_FILES['images'])) {
    echo json_encode(['error'=>'No files found for upload.']); 
    // or you can throw an exception 
    return; // terminate
}
 
// get the files posted
$images = $_FILES['images'];
 
// get user id posted
$userid = empty($_POST['userid']) ? '' : $_POST['userid'];
 
// get user name posted
$username = empty($_POST['username']) ? '' : $_POST['username'];
 
// a flag to see if everything is ok
$success = null;
 
// file paths to store
$paths= [];
 
// get file names
$filenames = $images['name'];
 
// loop and process files
for($i=0; $i < count($filenames); $i++){
    $ext = explode('.', basename($filenames[$i]));
    $target = "/tickets/" . DIRECTORY_SEPARATOR . md5(uniqid()) . "." . array_pop($ext);
    if(move_uploaded_file($images['tmp_name'][$i], $target)) {
        $success = true;
        $paths[] = $target;
    } else {
        $success = false;
        break;
    }
}
 
// check and process based on successful status 
if ($success === true) {
    // call the function to save all data to database
    // code for the following function `save_data` is not 
    // mentioned in this example
    save_data($userid, $username, $paths);
 
    // store a successful response (default at least an empty array). You
    // could return any additional response info you need to the plugin for
    // advanced implementations.
    $output = ['success'=>'Upload Success'];
    // for example you can get the list of files uploaded this way
    // $output = ['uploaded' => $paths];
} elseif ($success === false) {
    $output = ['error'=>'Error while uploading images. Contact the system administrator'];
    // delete any uploaded files
    foreach ($paths as $file) {
        unlink($file);
    }
} else {
    $output = ['error'=>'No files were processed.'];
}
 
// return a json encoded response for plugin to process successfully
echo json_encode($output);
?>

Chickenkook f('ip_que'))?> 06-11-2015 11:52:09

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ที่นี้มันอัพโหลด ลง โฟเดอร์นะค่ะ ตามภาพเลยค่ะ

แต่มันก็ยังเป็นแบบนี้อยู่ค่ะ ไม่ทราบว่าต้องไปตั้งค่าอะไร ตรงไหนไหมค่ะ

chickenkook f('ip_ans'))?> 06-11-2015 11:56

ความคิดเห็นที่ 2

ตรงสีแดงคืออะไร ภาพไม่ชัด ลองแก้ตาม error ที่แจ้ง

ninenik f('ip_ans'))?> 06-11-2015

ความคิดเห็นที่ 3

แก้ไม่ได้เลยค่ะ หาจุดแก้ไม่ได้ค่ะ มันคือว่า

ไม่ทราบว่ามันติดตรงไหนเหมือนกันมันไม่เข้าเงื่อนไข success เลยค่ะ แต่เก็บเข้า โฟเดอร์เป็นชื่อแบบ md5 ด้วยค่ะ รบกวนช่วยดูให้หน่อยนะนะค่ะ ขอบคุณมากเลยค่ะ

chickenkook f('ip_ans'))?> 06-11-2015 13:45

ความคิดเห็นที่ 4

เป็นกับไฟล์ subir.php น่าจะมีข้อความบางส่วนเช่น warning ที่ทำให้ข้อมูล
ที่ส่งกลับมา เกิดผิดพลาด ผิดรูปแบบของโครงเสร้าง json ไฟล์ ตัวอย่าง ตัดการเชื่องต่อฐานข้อมูลออก

<?php
header("Content-type:application/json; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false);  
// upload.php
// 'images' refers to your file input name attribute
if (empty($_FILES['images'])) {
    echo json_encode(['error'=>'No files found for upload.']); 
    // or you can throw an exception 
    return; // terminate
}
 
// get the files posted
$images = $_FILES['images'];
 
// get user id posted
$userid = empty($_POST['userid']) ? '' : $_POST['userid'];
 
// get user name posted
$username = empty($_POST['username']) ? '' : $_POST['username'];
 
// a flag to see if everything is ok
$success = null;
 
// file paths to store
$paths= [];
 
// get file names
$filenames = $images['name'];
 
// loop and process files
for($i=0; $i < count($filenames); $i++){
    $ext = explode('.', basename($filenames[$i]));
    $target = "upload/" .$filenames[$i];
    if(move_uploaded_file($images['tmp_name'][$i], $target)) {
        $success = true;
        $paths[] = $target;
    } else {
        $success = false;
        break;
    }
}

if ($success === true) {
    $output = ['success'=>'Upload Success'];
} elseif ($success === false) {
    $output = ['error'=>'Error while uploading images. Contact the system administrator'];
    foreach ($paths as $file) {
        unlink($file);
    }
} else {
    $output = ['error'=>'No files were processed.'];
}
echo json_encode($output);
?>

ninenik f('ip_ans'))?> 06-11-2015

ความคิดเห็นที่ 5

มันก็ยังไม่ได้อยู่ดีค่ะ ขึ้นเหมือนเดิมเลยค่ะ แล้วก็ไม่เก็บไฟล์ลงโฟเดอร์ด้วยค่ะ

chickenkook f('ip_ans'))?> 06-11-2015 16:01

ความคิดเห็นที่ 6

ลองแก้เองได้แล้วค่ะ ขอบคุณมากๆเลยนะค่ะ ^^

chickenkook f('ip_ans'))?> 06-11-2015 16:26

ความคิดเห็นที่ 7

แล้วถ้าเราต้องการเก็บลงดาต้าด้วยอ่ะค่ะ ต้องไปใส่ sql ตรงส่วนไหนหรอค่ะ

chickenkook f('ip_ans'))?> 06-11-2015 16:38

ความคิดเห็นที่ 8

น่าจะประมาณนี้

<?php
header("Content-type:application/json; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false);  
// ส่วนติดต่อกับฐานข้อมูล  
mysql_connect("localhost","root","test") or die("Cannot connect the Server");       
mysql_select_db("test") or die("Cannot select database");       
mysql_query("set character set utf8");     
// upload.php
// 'images' refers to your file input name attribute
if (empty($_FILES['images'])) {
    echo json_encode(['error'=>'No files found for upload.']); 
    // or you can throw an exception 
    return; // terminate
}
 
// get the files posted
$images = $_FILES['images'];
 
// get user id posted
$userid = empty($_POST['userid']) ? '' : $_POST['userid'];
 
// get user name posted
$username = empty($_POST['username']) ? '' : $_POST['username'];
 
// a flag to see if everything is ok
$success = null;
 
// file paths to store
$paths= [];
 
// get file names
$filenames = $images['name'];
 
// loop and process files
for($i=0; $i < count($filenames); $i++){
    $ext = explode('.', basename($filenames[$i]));
    $target = "upload/" .$filenames[$i];
    if(move_uploaded_file($images['tmp_name'][$i], $target)) {
        $success = true;
        $q="
        INSERT INTO table (xxxxx,bbbb) VALUES ($xxxx,$target)....
        ";  
        $qr=mysql_query($q);  
        $paths[] = $target;
    } else {
        $success = false;
        break;
    }
}

if ($success === true) {
    $output = ['success'=>'Upload Success'];
} elseif ($success === false) {
    $output = ['error'=>'Error while uploading images. Contact the system administrator'];
    foreach ($paths as $file) {
        unlink($file);
    }
} else {
    $output = ['error'=>'No files were processed.'];
}
echo json_encode($output);
?>

ninenik f('ip_ans'))?> 06-11-2015

ความคิดเห็นที่ 9

ขอบคุณมากเลยค่ะ แล้วถ้าต้องการแสดงเป็น PDF ที่ดึงมาจากฐานข้อมูล แต่อยากให้แสดงออกมาแบบนี้ค่ะ

ต้องดึงมันมาโชว์ยังไงหรอค่ะ ?

อันนี้คือ ส่วนโชว์ เป็น สคริปค่ะ

<script>
	$("#input-25").fileinput({
        initialPreview: [
		"document/<?=$row1["cd_file"] ?>"
			//"<embed width='600' height='450' src='document/<?//=$row1["cd_file"] ?>' type='application/pdf' ></embed>"
			//"<iframe src='document/<?//=$row1["cd_file"] ?>'></iframe>"
           //"<img src='document/<?//=$row1["cd_file"] ?>' class='file-preview'>"
        ],
		uploadUrl: "http://www.crew45.com/bigsea/upload_document.php",
		browseClass: "btn btn-success",
		removeClass: "btn btn-danger",
		uploadAsync: true,
		previewClass: "bg-info",
   		maxFileCount: 5,
		allowedFileExtensions: ["jpg","pdf","doc","docx"],
        elErrorContainer: "#errorBlock",
        initialCaption: "<?=$row1["cd_file"] ?>",
    });
	$(".btn-warning").on('click', function() {
        if ($('#input-25').attr('disabled')) {
            $('#input-25').fileinput('enable');
        } else {
            $('#input-25').fileinput('disable');
        }
    }); 
    $(".btn-info").on('click', function() {
        $('#input-25').fileinput('refresh', {previewClass:'bg-info'});
    });
</script>

หรือพอมีคำแนะนำอะไรไหมค่ะ

chickenkook f('ip_ans'))?> 06-11-2015 19:28

ความคิดเห็นที่ 10

ช่วยหน่อยครับ

ทำไมของผมยังขึ้น error อยู่ล่ะครับ

Demo ครับ

http://crenoveative.com/js/bootstrap-file-fnput/index.php

โค็ดที่ผมใช้ตามนี้เลยครับ

index.php ครับ

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Fuck yeah</title>
 
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/fileinput.min.css">
 
</head>
<body>
    <section id="inv-body" class="center-block">
 
		<div class="container" style="padding-top: 40px;">
		
        <div id="pedido" class="">
 
            <form id="ticketec" class="" method="post" enctype="multipart/form-data">
                <input type="hidden" name="server" value="logged-user-server"></input>
                <input type="hidden" name="user" value="logged-user"></input>
                <div class="form-group">
                    <input id="images" name="images[]" type="file" multiple>
                    <div id="errorBlock43" class="help-block"></div>
                </div>
                <!--<input type="hidden" name="ticketenviado" value="si"></input>-->
                <input id="userid" name="userid" type="hidden">
                <input id="username" name="username" type="text">
                <button type="submit" class="btn btn-danger center-block">Submit</button>
            </form>
 
            <!--<form id="confirm" class="hidden" method="GET">
 
            </form>-->
 
        </div>
		
		</div>
		
    </section>
 
</div>
 
<script src="js/fileinput.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/fileinput.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 
<script>
$(document).ready(function() {
    // Disable preview and customize your own error container and messages.
$("#images").fileinput({
    //showPreview: false,
    browseClass: "btn btn-danger",
    showCaption: true,
    showRemove: true,
    showUpload: true,
    previewFileType: "image",
    browseIcon: '<i class="glyphicon glyphicon-picture"></i>',
    allowedFileExtensions: ["jpg", "JPG", "jpeg", "JPEG", "png", "PNG", "pdf"],
    elErrorContainer: "#errorBlock43",
    msgInvalidFileExtension: 'El formato de "{name}" es incorrecto. Solo archivos "{extensions}" son admitidos.',
    // you can configure `msgErrorClass` and `msgInvalidFileExtension` as well
    //AJAX
        dropZoneEnabled: false,
        uploadAsync: false,
        uploadUrl: "subir.php", // your upload server url
        uploadExtraData: function() {
            return {
               userid: $("#userid").val(),
                username: $("#username").val()
            };
        }
});
 
});
</script>
</body>
</html>

และส่วนอันนี้เป็น subir.php เพื่อทำการอัพโหลดไฟล์ครับ

<?php
header("Content-type:application/json; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false);  
// upload.php
// 'images' refers to your file input name attribute
if (empty($_FILES['images'])) {
    echo json_encode(['error'=>'No files found for upload.']); 
    // or you can throw an exception 
    return; // terminate
}
  
// get the files posted
$images = $_FILES['images'];
  
// get user id posted
$userid = empty($_POST['userid']) ? '' : $_POST['userid'];
  
// get user name posted
$username = empty($_POST['username']) ? '' : $_POST['username'];
  
// a flag to see if everything is ok
$success = null;
  
// file paths to store
$paths= [];
  
// get file names
$filenames = $images['name'];
  
// loop and process files
for($i=0; $i < count($filenames); $i++){
    $ext = explode('.', basename($filenames[$i]));
    $target = "uploads/" .$filenames[$i];
    if(move_uploaded_file($images['tmp_name'][$i], $target)) {
        $success = true;
        $paths[] = $target;
    } else {
        $success = false;
        break;
    }
}
 
if ($success === true) {
    $output = ['success'=>'Upload Success'];
} elseif ($success === false) {
    $output = ['error'=>'Error while uploading images. Contact the system administrator'];
    foreach ($paths as $file) {
        unlink($file);
    }
} else {
    $output = ['error'=>'No files were processed.'];
}
echo json_encode($output);
?>

Hakeem IbnFaisal f('ip_ans'))?> 25-04-2018 17:25

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน