Dropzone.jsで複数画像をアップロード

Dropzone.jsで複数画像をアップロードしたかったが、

なかなかいい記事が見つからなかったので、自分のやったことをメモ。

<HTML側>

<form action="upload.php" class="dropzone" id="my-dropzone"></form>

※multiple とか enctype="multipart/form-data"とか書いてあるサンプルがあるが、

必要ない

 

<Dropzone.js側>

uploadMultiple: true,
paramName: "file[]",

この2つのパラメーターに注意し、上記のように設定しておく

※Dropzone.jsの公式サイトをみると、paramName:true のような書き方がしてあるが、

それでは駄目。

※parallelUploadsは、特に関係がないみたい。この数を越えた数を一気にアップロードしてみたが、処理が2回に分けられるだけで、問題なくアップされた。

ただし、ソースは見ていない。

 

PHP側>

for ($i=0; $i<count($_FILES['file']['name']); $i++) {
$tempFile = $_FILES['file']['tmp_name'][$i][$i];
@list($file_name,$file_type) = explode(".",@$_FILES['file']['name'][$i][$i]);
$savename = date("YmdHis").'_'.$i.'.'.$file_type;
$targetFile = $user_dir.'/'.$savename;
move_uploaded_file($tempFile,$targetFile);
}

※私は、サーバーに保存する際、ファイル名を変えたかったので、

上記のような処理にした。

ファイル名を変える必要がなければ、@listとか不要になる。

$_FILES[file][name]をデバッグすると、以下のような感じで送られてきていた。

$_FILES[file][name]=Array
(
[0] => Array
(
[0] => test1.jpg
)
 
[1] => Array
(
[1] => test2.jpg
)
 
[2] => Array
(
[2] => test3.jpg
)
 
[3] => Array
(
[3] => test4.jpg
)
 
)

 

PHPからの処理を受けるjs側>

Dropzone.options.myDropzone = {
init: function() {
thisDropzone = this;
this.on("successmultiple", function(file, savename){
ここにアップロード完了時の処理を書く
}
}
}

 

 ※multipleがfalseの場合、処理完了時は、this.on("success") のところに書くが、

multiple:true の場合は、this.on("successmultiple") のところに書く。

※functionの引数の、savename のところは、upload.php からecho で返されたものが入る。

 

以上 

 

 

 

 

 

 

 

 

 

Amazon EC2のImageMagickでSVGを扱う

1.CentOS-Baseリポジトリを追加(必要かどうかよくわからないが、epelは元々入っているが有効になっていないので、有効にする)
追加方法は前の記事参照

2.再ビルド
cd /urs/local/src/ImageMagick-7.0.5-4
sudo ./configure
sudo make
sudo make install


3.convert -list format で確認
赤字の部分が rw+になっていればOK

Format Mode Description

3FR r-- Hasselblad CFV/H3D39II
3G2 r-- Media Container
3GP r-- Media Container
A* rw+ Raw alpha samples
AAI* rw+ AAI Dune image
AI rw- Adobe Illustrator CS2
ART* rw- PFS: 1st Publisher Clip Art
ARW r-- Sony Alpha Raw Image Format
AVI r-- Microsoft Audio/Visual Interleaved
AVS* rw+ AVS X image
B* rw+ Raw blue samples
BGR* rw+ Raw blue, green, and red samples
BGRA* rw+ Raw blue, green, red, and alpha samples
BGRO* rw+ Raw blue, green, red, and opacity samples
BMP* rw- Microsoft Windows bitmap image
BMP2* -w- Microsoft Windows bitmap image (V2)
BMP3* -w- Microsoft Windows bitmap image (V3)
BRF* -w- BRF ASCII Braille format
C* rw+ Raw cyan samples
CAL* rw- Continuous Acquisition and Life-cycle Support Type 1
Specified in MIL-R-28002 and MIL-PRF-28002
CALS* rw- Continuous Acquisition and Life-cycle Support Type 1
Specified in MIL-R-28002 and MIL-PRF-28002
CANVAS* r-- Constant image uniform color
CAPTION* r-- Caption
CIN* rw- Cineon Image File
CIP* -w- Cisco IP phone image format
CLIP* rw+ Image Clip Mask
CMYK* rw+ Raw cyan, magenta, yellow, and black samples
CMYKA* rw+ Raw cyan, magenta, yellow, black, and alpha samples
CR2 r-- Canon Digital Camera Raw Image Format
CRW r-- Canon Digital Camera Raw Image Format
CUR* rw- Microsoft icon
CUT* r-- DR Halo
DCM* r-- Digital Imaging and Communications in Medicine image
DICOM is used by the medical community for images like X-rays. The
specification, "Digital Imaging and Communications in Medicine
(DICOM)", is available at http://medical.nema.org/. In particular,
see part 5 which describes the image encoding (RLE, JPEG, JPEG-LS),
and supplement 61 which adds JPEG-2000 encoding.
DCR r-- Kodak Digital Camera Raw Image File
DCX* rw+ ZSoft IBM PC multi-page Paintbrush
DDS* rw+ Microsoft DirectDraw Surface
DFONT* r-- Multi-face font package (Freetype 2.3.11)
DNG r-- Digital Negative
DPX* rw- SMPTE 268M-2003 (DPX 2.0)
Digital Moving Picture Exchange Bitmap, Version 2.0.
See SMPTE 268M-2003 specification at http://www.smtpe.org

DXT1* rw+ Microsoft DirectDraw Surface
DXT5* rw+ Microsoft DirectDraw Surface
EPDF rw- Encapsulated Portable Document Format
EPI rw- Encapsulated PostScript Interchange format
EPS rw- Encapsulated PostScript
EPS2* -w- Level II Encapsulated PostScript
EPS3* -w+ Level III Encapsulated PostScript
EPSF rw- Encapsulated PostScript
EPSI rw- Encapsulated PostScript Interchange format
EPT rw- Encapsulated PostScript with TIFF preview
EPT2 rw- Encapsulated PostScript Level II with TIFF preview
EPT3 rw+ Encapsulated PostScript Level III with TIFF preview
ERF r-- Epson RAW Format
EXR rw- High Dynamic-range (HDR)
FAX* rw+ Group 3 FAX
FAX machines use non-square pixels which are 1.5 times wider than
they are tall but computer displays use square pixels, therefore
FAX images may appear to be narrow unless they are explicitly
resized using a geometry of "150x100%".

FILE* r-- Uniform Resource Locator (file://)
FITS* rw- Flexible Image Transport System
FRACTAL* r-- Plasma fractal image
FTP* r-- Uniform Resource Locator (ftp://)
FTS* rw- Flexible Image Transport System
G* rw+ Raw green samples
G3* rw- Group 3 FAX
G4* rw- Group 4 FAX
GIF* rw+ CompuServe graphics interchange format
GIF87* rw- CompuServe graphics interchange format (version 87a)
GRADIENT* r-- Gradual linear passing from one shade to another
GRAY* rw+ Raw gray samples
GROUP4* rw- Raw CCITT Group4
HALD* r-- Identity Hald color lookup table image
HDR* rw+ Radiance RGBE image format
HISTOGRAM* -w- Histogram of the image
HRZ* rw- Slow Scan TeleVision
HTM* -w- Hypertext Markup Language and a client-side image map
HTML* -w- Hypertext Markup Language and a client-side image map
HTTP* r-- Uniform Resource Locator (http://)
HTTPS* --- Uniform Resource Locator (https://)
ICB* rw- Truevision Targa image
ICO* rw+ Microsoft icon
ICON* rw- Microsoft icon
IIQ r-- Phase One Raw Image Format
INFO -w+ The image format and characteristics
INLINE* rw+ Base64-encoded inline images
IPL* rw+ IPL Image Sequence
ISOBRL* -w- ISO/TR 11548-1 format
ISOBRL6* -w- ISO/TR 11548-1 format 6dot
JNG* rw- JPEG Network Graphics
See http://www.libpng.org/pub/mng/ for details about the JNG
format.
JNX* r-- Garmin tile format
JPE* rw- Joint Photographic Experts Group JFIF format (62)
JPEG* rw- Joint Photographic Experts Group JFIF format (62)
JPG* rw- Joint Photographic Experts Group JFIF format (62)
JPS* rw- Joint Photographic Experts Group JFIF format (62)
JSON -w+ The image format and characteristics
K* rw+ Raw black samples
K25 r-- Kodak Digital Camera Raw Image Format
KDC r-- Kodak Digital Camera Raw Image Format
LABEL* r-- Image label
M* rw+ Raw magenta samples
M2V rw+ MPEG Video Stream
M4V rw+ Raw MPEG-4 Video
MAC* r-- MAC Paint
MAP* rw- Colormap intensities and indices
MASK* rw+ Image Clip Mask
MAT rw+ MATLAB level 5 image format
MATTE* -w+ MATTE format
MEF r-- Mamiya Raw Image File
MIFF* rw+ Magick Image File Format
MKV rw+ Multimedia Container
MNG* rw+ Multiple-image Network Graphics (libpng 1.2.49)
See http://www.libpng.org/pub/mng/ for details about the MNG
format.
MONO* rw- Raw bi-level bitmap
MOV rw+ MPEG Video Stream
MP4 rw+ MPEG-4 Video Stream
MPC* rw+ Magick Persistent Cache image format
MPEG rw+ MPEG Video Stream
MPG rw+ MPEG Video Stream
MRW r-- Sony (Minolta) Raw Image File
MSL* rw+ Magick Scripting Language
MSVG rw+ ImageMagick's own SVG internal renderer
MTV* rw+ MTV Raytracing image format
MVG* rw- Magick Vector Graphics
NEF r-- Nikon Digital SLR Camera Raw Image File
NRW r-- Nikon Digital SLR Camera Raw Image File
NULL* rw- Constant image of uniform color
O* rw+ Raw opacity samples
ORF r-- Olympus Digital Camera Raw Image File
OTB* rw- On-the-air bitmap
OTF* r-- Open Type font (Freetype 2.3.11)
PAL* rw- 16bit/pixel interleaved YUV
PALM* rw+ Palm pixmap
PAM* rw+ Common 2-dimensional bitmap format
PANGO* r-- Pango Markup Language (Pangocairo 1.28.1)
PATTERN* r-- Predefined pattern
PBM* rw+ Portable bitmap format (black and white)
PCD* rw- Photo CD
PCDS* rw- Photo CD
PCL rw+ Printer Control Language
PCT* rw- Apple Macintosh QuickDraw/PICT
PCX* rw- ZSoft IBM PC Paintbrush
PDB* rw+ Palm Database ImageViewer Format
PDF rw+ Portable Document Format
PDFA rw+ Portable Document Archive Format
PEF r-- Pentax Electronic File
PES* r-- Embrid Embroidery Format
PFA* r-- Postscript Type 1 font (ASCII) (Freetype 2.3.11)
PFB* r-- Postscript Type 1 font (binary) (Freetype 2.3.11)
PFM* rw+ Portable float format
PGM* rw+ Portable graymap format (gray scale)
PGX* rw- JPEG 2000 uncompressed format
PICON* rw- Personal Icon
PICT* rw- Apple Macintosh QuickDraw/PICT
PIX* r-- Alias/Wavefront RLE image format
PJPEG* rw- Joint Photographic Experts Group JFIF format (62)
PLASMA* r-- Plasma fractal image
PNG* rw- Portable Network Graphics (libpng 1.2.49)
See http://www.libpng.org/ for details about the PNG format.
PNG00* rw- PNG inheriting bit-depth, color-type from original, if possible
PNG24* rw- opaque or binary transparent 24-bit RGB (zlib 1.2.11)
PNG32* rw- opaque or transparent 32-bit RGBA
PNG48* rw- opaque or binary transparent 48-bit RGB
PNG64* rw- opaque or transparent 64-bit RGBA
PNG8* rw- 8-bit indexed with optional binary transparency
PNM* rw+ Portable anymap
PPM* rw+ Portable pixmap format (color)
PS rw+ PostScript
PS2* -w+ Level II PostScript
PS3* -w+ Level III PostScript
PSB* rw+ Adobe Large Document Format
PSD* rw+ Adobe Photoshop bitmap
PTIF* rw+ Pyramid encoded TIFF
PWP* r-- Seattle Film Works
R* rw+ Raw red samples
RADIAL-GRADIENT* r-- Gradual radial passing from one shade to another
RAF r-- Fuji CCD-RAW Graphic File
RAS* rw+ SUN Rasterfile
RAW r-- Raw
RGB* rw+ Raw red, green, and blue samples
RGBA* rw+ Raw red, green, blue, and alpha samples
RGBO* rw+ Raw red, green, blue, and opacity samples
RGF* rw- LEGO Mindstorms EV3 Robot Graphic Format (black and white)
RLA* r-- Alias/Wavefront image
RLE* r-- Utah Run length encoded image
RMF r-- Raw Media Format
RW2 r-- Panasonic Lumix Raw Image
SCR* r-- ZX-Spectrum SCREEN$
SCREENSHOT* r-- Screen shot
SCT* r-- Scitex HandShake
SFW* r-- Seattle Film Works
SGI* rw+ Irix RGB image
SHTML* -w- Hypertext Markup Language and a client-side image map
SIX* rw- DEC SIXEL Graphics Format
SIXEL* rw- DEC SIXEL Graphics Format
SPARSE-COLOR* -w+ Sparse Color
SR2 r-- Sony Raw Format 2
SRF r-- Sony Raw Format
STEGANO* r-- Steganographic image
SUN* rw+ SUN Rasterfile
SVG rw+ Scalable Vector Graphics (XML 2.9.1)
SVGZ rw+ Compressed Scalable Vector Graphics (XML 2.9.1)

TEXT* r-- Text
TGA* rw- Truevision Targa image
THUMBNAIL* -w+ EXIF Profile Thumbnail
TIFF* rw+ Tagged Image File Format (LIBTIFF, Version 4.0.3)
TIFF64* rw- Tagged Image File Format (64-bit) (LIBTIFF, Version 4.0.3)
TILE* r-- Tile image with a texture
TIM* r-- PSX TIM
TTC* r-- TrueType font collection (Freetype 2.3.11)
TTF* r-- TrueType font (Freetype 2.3.11)
TXT* rw+ Text
UBRL* -w- Unicode Text format
UBRL6* -w- Unicode Text format 6dot
UIL* -w- X-Motif UIL table
UYVY* rw- 16bit/pixel interleaved YUV
VDA* rw- Truevision Targa image
VICAR* rw- VICAR rasterfile format
VID* rw+ Visual Image Directory
VIFF* rw+ Khoros Visualization image
VIPS* rw+ VIPS image
VST* rw- Truevision Targa image
WBMP* rw- Wireless Bitmap (level 0) image
WMV rw+ Windows Media Video
WPG* r-- Word Perfect Graphics
X* rw+ X Image
X3F r-- Sigma Camera RAW Picture File
XBM* rw- X Windows system bitmap (black and white)
XC* r-- Constant image uniform color
XCF* r-- GIMP image
XPM* rw- X Windows system pixmap (color)
XPS r-- Microsoft XML Paper Specification
XV* rw+ Khoros Visualization image
XWD* rw- X Windows system window dump (color)
Y* rw+ Raw yellow samples
YCbCr* rw+ Raw Y, Cb, and Cr samples
YCbCrA* rw+ Raw Y, Cb, Cr, and alpha samples
YUV* rw- CCIR 601 4:1:1 or 4:2:2

以上

Amazon ec2 にレポジトリを追加する方法

docs.aws.amazon.com

 

 

[ec2-user ~]$ yum repolist all

 

 


repo id repo name status !amzn-main/latest amzn-main-Base enabled: 5,612 amzn-main-debuginfo/latest amzn-main-debuginfo disabled amzn-main-source/latest amzn-main-source disabled amzn-nosrc/latest amzn-nosrc-Base disabled amzn-preview/latest amzn-preview-Base disabled amzn-preview-debuginfo/latest amzn-preview-debuginfo disabled amzn-preview-source/latest amzn-preview-source disabled !amzn-updates/latest amzn-updates-Base enabled: 1,152 amzn-updates-debuginfo/latest amzn-updates-debuginfo disabled amzn-updates-source/latest amzn-updates-source disabled epel/x86_64 Extra Packages for Enterprise Linux 6 - x86_64 disabled epel-debuginfo/x86_64 Extra Packages for Enterprise Linux 6 - x86_64 - Debug disabled epel-source/x86_64 Extra Packages for Enterprise Linux 6 - x86_64 - Source disabled epel-testing/x86_64 Extra Packages for Enterprise Linux 6 - Testing - x86_64 disabled epel-testing-debuginfo/x86_64 Extra Packages for Enterprise Linux 6 - Testing - x86_64 - Debug disabled epel-testing-source/x86_64 Extra Packages for Enterprise Linux 6 - Testing - x86_64 - Source disabled

 

 

[ec2-user ~]$ sudo yum-config-manager --add-repo https://www.example.com/repository.repo

 

 


[ec2-user ~]$
sudo yum-config-manager --enable epel

 

phpからconvertするとき、エラーを見る方法

qiita.com

EC2へのGDのインストール

qiita.com

 

phpから画像を作成しようとすると、動かない。

phpinfoでみると、GDが入ってないことに気づいた。

 

php -m | grep gd

 

yum install php-gd

でインストールしようとしたが、何かエラーで終わる。

 

yum list | grep gd

で調べる。

dbm.x86_64 1.8.0-36.6.amzn1 installed
gdbm-devel.x86_64 1.8.0-36.6.amzn1 @amzn-main
gdisk.x86_64 0.8.10-1.5.amzn1 installed
php70-gd.x86_64 7.0.16-1.21.amzn1 @amzn-main
rubygem20-bigdecimal.x86_64 1.2.0-1.29.amzn1 installed
gd.i686 2.0.35-11.10.amzn1 amzn-main
gd.x86_64 2.0.35-11.10.amzn1 amzn-main
gd-devel.x86_64 2.0.35-11.10.amzn1 amzn-main
gd-progs.x86_64 2.0.35-11.10.amzn1 amzn-main
gdb.x86_64 7.6.1-64.33.amzn1 amzn-main
gdb-doc.noarch 7.6.1-64.33.amzn1 amzn-main
gdb-gdbserver.x86_64 7.6.1-64.33.amzn1 amzn-main
gdbm.i686 1.8.0-36.6.amzn1 amzn-main
graphviz-gd.x86_64 2.38.0-18.50.amzn1 amzn-main
hunspell-gd.noarch 1.0.0-0.3.rc.2.2.amzn1 amzn-main
php-gd.x86_64 5.3.29-1.8.amzn1 amzn-main
php54-gd.x86_64 5.4.45-1.75.amzn1 amzn-main
php55-gd.x86_64 5.5.38-2.119.amzn1 amzn-main
php56-gd.x86_64 5.6.30-1.133.amzn1 amzn-main
rubygem-bigdecimal.noarch 1:2.0-0.3.amzn1 amzn-main
rubygem19-bigdecimal.x86_64 1.1.0-32.70.amzn1 amzn-main
rubygem21-bigdecimal.x86_64 1.2.4-1.19.amzn1 amzn-main
rubygem22-bigdecimal.x86_64 1.2.6-1.8.amzn1 amzn-main
rubygem23-bigdecimal.x86_64 1.2.8-1.13.amzn1 amzn-main

 

以下のコマンドを実行。

yum install php70-gd.x86_64

 

うまくいった。

 

 

EC2にS3をマウントする

※追記 以下の記事が良くまとまっていてわかりやすい

qiita.com

 

以下は、EC2の構築初期に試したもので、不要な作業も混じっている

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

<前準備>

◆稼働中のEC2にIAMロールを割り当てる

既存のAmazon EC2インスタンスにIAM Roleがアタッチできるようになりました | Amazon Web Services ブログ

IAMロールなしで起動された既存のEC2インスタンスにIAMロールをアタッチ」を参照

 

qiita.com

blog.proudit.jp

しかし、その前に、aws-cliのバージョンを最新にあげる必要があります。

$aws --version
aws-cli/1.11.76 Python/2.7.12 Linux/4.9.20-10.30.amzn1.x86_64 botocore/1.5.39

 

アップグレードは以下のコマンド。

sudo pip install -U awscli

と書いてあったが、

sudo: pip: command not found

となる。

パスが通ってないぽいので、結局、

sudo /usr/local/bin/pip install -U awscli

でできた。

 

※1番目のブログで、
$aws ec2 associate-iam-instance-profile --instance-id インスタンスID --iam-instance-profile Name=インスタンスプロファイル名

と書いているが少しわかりにくい。以下の方がわかりやすい。

$aws ec2 associate-iam-instance-profile --instance-id インスタンスID --iam-instance-profile Name=ロール名

 

<作業本番>

1.S3バケットの準備

ここは簡単なので割愛

 

2.goofysのインストール

goofysインストール
sudo yum update -y
sudo yum install golang fuse -y
export GOPATH=/home/XXXX/go (←自分の場合は、/home/photoXXXX/go ここにインストされる) 
go get github.com/kahing/goofys
go install github.com/kahing/goofys

 

3.S3マウント

$ mkdir /var/www/html/XXXXX/mount    ←マウントさせるディレクト

$ /home/photoXXXX/go/bin/goofys S3バケット名 /var/www/html/XXXXX/mount

 

4.自動マウント設定

上記の2番目のブログを参照

 

※rootのアクセスキーを変更した時

コマンドで

sudo aws configure

をやり直す。

 名前付きのプロファイルを作成する場合は、

aws configure --profile user2

http://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-getting-started.html

 

●アンマウントする時

fusermount -u [マウントしたディレクトリ]

 

●マウントするバケットに所有者とアクセス権を指定する場合は以下

sudo su photoXXXX
export GOPATH=$HOME/go
mkdir /var/www/html/photoxxx/mount
$GOPATH/bin/goofys --region ap-northeast-1 --uid=48 --gid=48 --dir-mode=0666 バケット名 /var/www/html/マウントする場所
マウント位置確認
df -h

 

 

AWSのアカウント設定でやること

AWSベストプラクティスに準拠させることが重要

Amazon EC2 のベストプラクティス - Amazon Elastic Compute Cloud

 

・IAM ユーザーの作成

・多要素認証(MFA)仮想デバイスの有効化

※IAMユーザーとrootユーザーの両方の設定が必要

 IAMユーザーでログインして設定し、ログアウト後、rootでログインし直し、

 再度設定

 

・IAMユーザーへの請求画面へのアクセス設定

 →rootでログイン→アカウント→「IAM ユーザー/ロールによる請求情報へのアクセス」の横の「編集」→「IAM アクセスのアクティブ化」にチェック