|
|
|
ถามเกี่ยวกับ jquery sortable ครับ ในการจัดลำดับรูปก่อนอัพโหลด |
|
|
|
|
|
|
|
มี Code ที่เขียนไว้ไหม๊ครับ
|
|
|
|
|
Date :
2017-03-02 16:52:24 |
By :
mr.win |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
อันนี้ไฟล์ ฟอร์มอัพโหลดนะครับ
abc.php
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>Untitled Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
#fileList { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#fileList li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #fileList li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; cursor:pointer }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#fileList").sortable({
placeholder: "ui-state-highlight",
update : function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
$("#sortable-9").text (productOrder);
}
});
});
</script>
<script type="text/javascript">
function makeFileList()
{
var input = document.getElementById("filUpload");
var list = document.getElementById('fileList');
//var sortedIDs = $( ".selector" ).sortable( "toArray" );
//alert(''+input.files.length);
for (var x = 0; x < input.files.length; x++) {
var li = document.createElement('li');
li.setAttribute("id", x);
li.innerHTML = 'File ' + (x + 1) + ': '+ (x) +' ' + input.files[x].name;
list.append(li);
//$("list").attr('id', x).addClass("ui-state-highlight");
//alert(''+x);
}
$("li").addClass("ui-state-highlight");
}
</script>
<body>
<form action="check_upload2.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="file" name="filUpload[]" id="filUpload" multiple="" onChange="makeFileList();" />
<strong>Files You Selected:</strong>
</p>
<ul id="fileList">No Files Selected</ul>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="7%"> </td>
<td width="93%"> </td>
</tr>
<tr>
<td align="center"> </td>
<td><label>
<input type="submit" name="btn_upload" id="btn_upload" value=" upload " />
</label></td>
</tr>
</table><h3><span id = 'sortable-9'></span></h3>
</form>
</body>
</html>
ด้านล่างนี้ check_upload2.php
Code (PHP)
<?
include("../config.inc.php");
$txt_size =800;
$orderdate =date("y-m-d");//ใชับันทึกไปเมื่อตั้งกระทูั เพื่อใช้ในการเรียงกระทู้ล่าสุด
$cap_rander= rand(1,2);
$abb=$_POST['abb'];
echo"$abb";
$time = date("His");
$rjpg=".jpg";
$a=count($_FILES['filUpload']['name']);
echo"นับได้ $a";
exit();
for($i=0;$i<count($_FILES["filUpload"]["name"]);$i++)
{
echo"จำนวนไฟล์ $i<br/>";
if($_FILES["filUpload"]["name"][$i] != "")
{
$images = $_FILES["filUpload"]["tmp_name"][$i];
$new_images = date("YmdHis$i").$rjpg; //ไม่ใ0ส่ข้อความใหม่ใน ฟันหนู เพื่อให้ชื่อภาพตรงกัน เป็นภาพเดียวกัน $new_images =
$size = getimagesize($images);
if ($size[0] > $txt_size) {
$width=$txt_size; //*** Fix Width & Heigh (Autu caculate) ***//
$height=round($width*$size[1]/$size[0]);
$images_orig = imagecreatefromjpeg($images);
$photoX = imagesx($images_orig);
$photoY = imagesy($images_orig);
$images_fin = imagecreatetruecolor($width, $height);
imagecopyresampled($images_fin, $images_orig, 0, 0, 0, 0, $width+1, $height+1, $photoX, $photoY);
imagejpeg($images_fin,"../picture_publish/".$new_images);
imagedestroy($images_orig);
imagedestroy($images_fin);
} else {
//list($width, $height) = $size;
//echo"รูปกว้าง $width สูง $height"; ขนาดน้อยกว่าที่กำหนดไม่ต้องผ่านคำสั่งรีไซด์ ไม่งั้นคุณภาพเสีย
move_uploaded_file($_FILES["filUpload"]["tmp_name"][$i],"../picture_publish/".$new_images);
}
$sql = "INSERT INTO picture_publish";
$sql .="(name_pic, date_pic) values ('".$new_images."','$orderdate')"; // กำหนดคำสั่ง SQL เพื่อเพิ่มข้อมูลแบบคีย์ในคำสั่ง SQL
$dbquery = mysql_db_query($dbname, $sql);
$num_row_loop++;
?>
ปัญหาตอนนี้คือ อัพโหลดไปแล้วไม่เรียงเหมือนที่เราเรียง (ผมใช้คำสั่ง sortable ไม่เป็น และอาจต้องใชการอัพโหลดแบบ Ajax เข้ามาช่วย)
รวบกวนกูรูด้วยนะครับ
|
|
|
|
|
Date :
2017-03-02 17:51:25 |
By :
ฟงหวินขี่เครื่องสูบน้ำท้าลมหนา |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ได้แล้วครับ ใช้วิธีอื่นเอา
|
|
|
|
|
Date :
2017-03-03 08:52:36 |
By :
ฟงหวิน ขี่เครื่องสูบน้ำ ท้าลมห |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 02
|