2017年3月10日金曜日

JQuery id セレクタに変数と配列を使う場合

document.getElementById( "caseFrame" ).innerHTML += '<div class = "drag" style="display:inline-block"><img id="upload-pic[' + memory_file_counter + ']" src="' + dataUri + '"></div>' ;

ここで[0]みたいようなidを指定する必要があります。
var resizeId = '#upload-pic\\[' + memory_file_counter + '\\]';
$(resizeId).resizable();

\\で[や]など特殊文字を変換、+で変数を入れる。

2017年3月6日月曜日

jquery attr error

下記のコマンドを実行したら、エラーになった。

upload_pic = $('[name^=upload-pic]');
var attr_style = upload_pic[0].attr('style');
console.log(attr_style);

Uncaught TypeError: upload_pic[0].attr is not a function

調べてみたら、upload_pic[0]はplain DOM elementsのため、.attrを使うには、 jQuery objectに変換する必要があります。
var attr_style = $(upload_pic[0]).attr('style');

2017年3月3日金曜日

PHPで複数のfileをupload

HTML側
<form method="POST" enctype="multipart/form-data" action="merge.php">
<input type="file" name="upload_file[]" multiple id="file">
<input type="submit" name="submit" value="upload" />

PHP側
<?php
if(count($_FILES['upload_file'])) {
    foreach($_FILES['upload_file'] as $file) {
        print_r($file);
    }
}

参考:https://davidwalsh.name/multiple-file-upload

2017年3月2日木曜日

HTML5 File API

<input type="file" multiple id="file">  //multipleあれば、複数ファイルを選択できる

document.getElementById( "file" ).addEventListener( "change", function() {
 var fileList = this.files ;  //this.filesはFileListオブジェクト
 for( var i=0,l=fileList.length; l>i; i++ ) {
  var fileReader = new FileReader() ; //インスタンスを作成
  fileReader.readAsDataURL( fileList[i] ) ;  // ファイルをデータURIとして読み込む

//読み込みが成功して完了した場合、HTMLを書き出す
  fileReader.onload = function() {
   var dataUri = this.result ;
   document.getElementById( "output" ).innerHTML += '<img src="' + dataUri + '">' ;
  } 
 }
} ) ;
参考:
https://syncer.jp/javascript-reverse-reference/output-local-image
https://app.codegrid.net/entry/file-api-filereader-api

複数のfileをuploadするには

<input type="file" multiple id="file">

2016年12月11日日曜日

cakephpにおけるgmailアカウントによる送信設定

cakephpのマニュアル通りで、gmailのアカウントを設定しても、送信したら、エラーになって、gmailから「ブロックされたログインについてご確認ください」のメールが来た。メールの指示通り、「安全性の低いアプリ」のアクセスを許可しても、「SMTP server did not accept the password」のエラーになった。

そこで下記リンクにアクセスして、アカウントへのアクセスが有効にすれば、メールが送信できるようになった。
https://accounts.google.com/b/0/DisplayUnlockCaptcha

参考:http://stackoverflow.com/questions/26399202/sending-activation-email-smtp-server-did-not-accept-the-password

2016年12月7日水曜日

cloud9でcakephp2の設定

以前はgitHubからcloud9にcloneして、特に問題はなかったが。cakephp2のインストールファイルをそのままcloud9にコピーしたら、アクセスしようさい、「File does not exist」エラーになった。どうもweb rootの設定の問題のようです。

そこで、cloud9のapacheの設定を変更したところ、無事アクセスできるようになった。

sudo vi /etc/apache2/sites-enabled/001-cloud9.conf

DocumentRoot /home/ubuntu/workspace/app/webroot/ #この行を変更

sudo service apache2 restart

参考ページ
http://qiita.com/entaku19890818/items/918bdeeac6a99b03c93b
http://qiita.com/daiki7nohe/items/6e65d405f6dad1888d74