リストをドラッグ＆ドロップで順番を入れ替える
カテゴリ：HTML JavaScript CGI PHP
リストやテーブルの項目をドラッグ＆ドロップで順番を入れ替えてみましょう。
jQuery UIをつかいます。該当するものをググってもってきましょう。
<form action="sort.php" method="post">
<table border=1>
<thead>
<tr><th>No</th><th>List</th></tr>
</thead>
<tbody id="jquery-ui-sortable">
<tr>
<input type="hidden" name="disp[a]" id='disp_a' value="1">
<td name="num_data" var="a">1</td><td>a</td>
</tr>
<tr>
<input type="hidden" name="disp[b]" id='disp_b' value="2">
<td name="num_data" var="b">2</td><td>b</td>
</tr>
<tr>
<input type="hidden" name="disp[c]" id='disp_c' value="3">
<td name="num_data" var="c">3</td><td>c</td>
</tr>
</tbody>
</table>
<input type="submit" value="送信">
</form>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="query.ui.sortable.js"></script>
<script>
$(function() {
$('#jquery-ui-sortable').sortable();
$('#jquery-ui-sortable').bind('sortstop',function(){
$(this).find('[name="num_data"]').each(function(idx){
$(this).html(idx+1);
var id = $(this).attr('var');
$("#disp_"+id).val(idx+1);
});
});
});
</script>
テーブルのTDタグに属性としてname="num_data"をつけましょう。
その部分がソート可能となります。移動すると、同じ行も一緒についてきます。↑の例では項目は
・a
・b
・c
の３っつ。これを属性varの値として設定しておいて、入れ替えが起こったら、formのhidden項目で、そのときの順番を即時反映して、表示Noを入れ替えています。
formに値を渡さないで、単に並べ替えるだけなら、こういったことはいっさい必要ありません。
$('#jquery-ui-sortable').sortable();
$('#jquery-ui-sortable').disableSelection();
だけでＯＫです。
PHP側でソートしたものを受け取ってみます。
<?php
var_dump($_POST['disp']);
?>
c,b,aの順になっていたら、disp[c]が1、disp[b]が2、disp[a]が1となります。
リストで使いたい場合は、次のようなカンジ。
こちらの場合、入れ替え時にNoを表示しないので都度何もせず、送信時にそのときの値をいれて送信すればＯＫです。
<form action="sort.php" method="post" id="form1">
<ul id="jquery-ui-sortable">
<li name="num_data" var="a">a
<input type="hidden" name="disp[a]" id='disp_a' value="1"></li>
<li name="num_data" var="b">b
<input type="hidden" name="disp[b]" id='disp_b' value="2"></li>
<li name="num_data" var="c">c
<input type="hidden" name="disp[c]" id='disp_c' value="3"></li>
</ul>
<input type="button" value="送信" id="sbmt">
</form>
(略)
<script>
$(function() {
$('#jquery-ui-sortable').sortable();
$('#jquery-ui-sortable').disableSelection();
// 送信時にそのときの順番を入れる
$('#sbmt').click(function() {
$('#jquery-ui-sortable').find('[name="num_data"]').each(function(idx){
var id = $(this).attr('var');
$("#disp_"+id).val(idx+1);
});
$('#form1').submit();
});
});
</script>
ファイルをドラッグ＆ドロップでアップロード 複数アップロード領域
カテゴリ：HTML JavaScript CGI PHP
複数のファイルアップロード領域で、ドラッグ＆ドロップを作ってみます。
こんなの何に使うんだ？とお思いでしょうが、使ったことがあったんです！
最初は何も出てきません。
「追加」という部分をクリックしたら「ここにドラッグ＆ドロップ」領域ができます。ここにファイルをアップロード。「追加」ボタンを押すたびに増えます。
領域１、領域２という具合です。
※↓デザインもなにも考えてないものなので、大変見難いです。
<form id="form" enctype="multipart/form-data">
<input type="hidden" name="count" value="0" id="count">
<div id="addarea"></div>
<div id="add">追加</div>
<button type="button" id="sbm">送信</button>
</form>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
var file_list = new Array();
$('#sbm').click(function() {
var form = $('#form').get()[0];
var formData = new FormData(form);
if(file_list){
for (var k in file_list) {
var i;
var num = file_list[k].length;
for(i=0;i< num;i++)
formData.append('upfiles['+(k)+'][]', file_list[k][i]);
}
}
$.ajax({ url: 'upload.php', method: 'post', data: formData,
processData: false, contentType: false
}).done(function(res) {
if(res == '1') alert('送信できました');
else alert('送信できませんでした');
}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('送信エラー');
})
});
// ドラッグ＆ドロップ領域をつくる
$('#add').on('click', function() {
var r = Number($('#count').val());
var str = '<div id="upfiles_'+(r)+'" name="upfiles['+(r)+'][]">ここにドラッグ＆ドロップ</div><div id="upfiles_'+(r)+'_filename"></div>';
$('#addarea').append(str);
inittarget('upfiles_'+(r), r);
file_list[r] = '';
$('#count').val(r+1);
});
function inittarget(target, r) {
var fileArea = document.getElementById(target);
fileArea.addEventListener('dragover', function(evt){
evt.preventDefault();
fileArea.classList.add('dragover');
});
fileArea.addEventListener('dragleave', function(evt){
evt.preventDefault();
fileArea.classList.remove('dragover');
});
fileArea.addEventListener('drop', function(evt){
evt.preventDefault();
fileArea.classList.remove('dragenter');
file_list[r] = evt.dataTransfer.files;
$("#"+target+'_filename').text('');
for (var i = 0; i < file_list[r].length; i++)
$("#"+target+'_filename').append(file_list[r][i].name + '<br>');
});
}
});
</script>
upfiles[領域１][複数ファイル]、upfiles[領域２][複数ファイル]という状況で格納され、「送信」ボタンでまとめてアップロード。
受け取り側は、領域ごとに複数受け取るようにします。
<?php
foreach($_FILES['upfiles']['tmp_name'] as $k => $v) {
// 領域ごとのまとまり
foreach($v as $k1 => $v1) {
$fname = $_FILES['upfiles']['name'][$k][$k1];
$ext = pathinfo($fname, PATHINFO_EXTENSION);
$filename = date("YmdHis") . '_' . $k . '_' . $k1 . '.' . $ext;
move_uploaded_file($v1, $filename);
}
}
echo 1;
?>
これもファイルチェックなどなにも入れてないのでご自由に。
jsのメモリ領域ってどうなってんの？という状態なので、正直結構ムリヤリ技かも。とりあえずこれで動きます。
今はもっと便利なやりかたがあるかもしれません。
ファイルをドラッグ＆ドロップでアップロード
カテゴリ：HTML JavaScript CGI PHP
ファイルをドラッグ＆ドロップでアップロードします。
即自動アップロードはよくあるので、一度formに貯めてから「送信」ボタンでアップロードします。送信はajax、つまり非同期で画面遷移なしです。
他に一緒に送るフォーム項目があるときなどにこの方法を使います。
まずはHTML側。
<form id="form" enctype="multipart/form-data">
<div id="drop-zone">ここにドラッグ＆ドロップ</div>
<div id="filenames"></div>
<button type="button" id="sbm">送信</button>
</form>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
var file_list;
$('#sbm').click(function() {
var form = $('#form').get()[0];
var formData = new FormData(form);
if(file_list){
var i;
var num = file_list.length;
for(i=0;i< num;i++){
formData.append('upfiles[]', file_list[i]);
}
}
$.ajax({ url: 'upload.php', method: 'post', data: formData,
processData: false, contentType: false
}).done(function(res) {
if(res == '1') alert('送信できました');
else alert('送信できませんでした');
}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('送信エラー');
})
});
//ドラッグ＆ドロップ処理
var fileArea = document.getElementById('drop-zone');
fileArea.addEventListener('dragover', function(evt){
evt.preventDefault();
fileArea.classList.add('dragover');
});
fileArea.addEventListener('dragleave', function(evt){
evt.preventDefault();
fileArea.classList.remove('dragover');
});
fileArea.addEventListener('drop', function(evt){
evt.preventDefault();
fileArea.classList.remove('dragenter');
file_list = evt.dataTransfer.files;
//念のためにファイル名を表示
$("#filenames").text('');
for (var i = 0; i < file_list.length; i++)
$("#filenames").append(file_list[i].name + '<br>');
});
});
</script>
デザインもなにもないです。「ここにドラッグ＆ドロップ」部分にアップロードしたいファイルをドラッグ＆ドロップして、「送信」ボタンで送信します。
jsでは、ドラッグ＆ドロップしたファイルを一時file_listにとって、それを送信時にformDataに追加しています。他に送信するデータがあれば、それもformDataにいれておきます。
ファイル名表示処理はわかりやすくするために入れてあります。普通は不要でしょう。
formデータをupload.phpに送り、返ってきた値で色々処理をします。↑では単にalertを出してるだけですが、form領域を消してかわりにメッセージを表示すると、一見画面遷移したように見えます（笑）。
受け取るPHP側。upload.phpとします。ファイルのチェックとかは色々省略。特に注意することはありませんが、ajaxで渡してきているので、結果を適当に返しましょう。今回はＯＫだったら1を返しています。
<?php
foreach($_FILES['upfiles']['tmp_name'] as $k => $v) {
$fname = $_FILES['upfiles']['name'][$k];
$ext = pathinfo($fname, PATHINFO_EXTENSION);
$filename = date("YmdHis") . '_' . $k . '.' . $ext;
move_uploaded_file($v, $filename);
}
echo 1;
?>
拡張子だけ生かして、ファイル名は独自につけてます。元のファイル名をつけておくことは可能ですが、日本語ファイル名だとサーバ側の環境によって注意が必要です。windowsサーバなどではSJISにしておかないと文字化けすることがあります。
当時作ったときは結構苦労したんですが、今調べると結構同じ事をやっている人がいる。やっぱりみんなおなじことやってるんだなー。
phpでzipファイルを作る
カテゴリ：CGI PHP
方法１：ZipArchiveを利用する。
phpでzipファイルを作成した場合は、phpのZipArchiveを使いましょう。
zipファイルの作り方はこんなカンジ。
$zip = new ZipArchive();
$result = $zip->open('zipファイル名',
ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE);
if($result) {
$zip->addFile('zipに追加したいファイル名');
$zip->close();
}
zipファイルを作ってすぐにダウンロードさせたい場合でも、zipはメモリ上にデータとして作れないので、一度どこかファイルに保存して、それを読み取って流します。
zipに追加したいファイルは、どこかに作ってある必要があります。
例えばＤＢからデータ取得、csvにしてさらにzipで固めてダウンロードさせたい場合、まずはcsvファイルを作って保存し、さらにzipファイルも作って保存する形になります。最後に必要ないならつくったzipファイルは削除して終了。
header('Content-Type: application/zip; name="'.
'zipファイル名' .'"');
header('Content-Disposition: attachment; filename="'.
'zipファイル名' .'"');
header('Content-Length: '.filesize('zipファイル名'));
echo file_get_contents('zipファイル名');
unlink('zipファイル名');
方法２：zipコマンドを利用する
ZipArchiveを使う場合、いまのところパスワードつきのzipファイルを作ることはできません。
その場合、システムに作ってもらいましょう。
exec('zip -jP ' . 'パスワード' . ' ' . 'zipファイル名' . ' ' .
'zipに追加したいファイル名');
オプションに-jPをつけます。パスワードを作る-Pだけだと、解答ソフトによってはうまくいきません。
あと、解凍したファイルをpcで使う場合は、ファイル名や中身をSJISにしておいたほうが問題がありません。ファイル名のせいで解凍できないことがあるようです。
【最新記事】
- リストをドラッグ＆ドロップで順番を入れ替える
- ファイルをドラッグ＆ドロップでアップロード 複数アップロード領域
- ファイルをドラッグ＆ドロップでアップロード
- phpでzipファイルを作る