
今更ながらのdropzone.jsプラグインですが、今やファイルアップロードではドラッグ&ドロップが必須ですので念のため紹介しておきます。ちなみにサンプルコードはAWSのS3のアップロードにしています。
是非デモで動きを確認してみてくださいね。デモは実際には画像を保存するようにしていないので安心して下さい。
それではdropzone.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。
<div id="my-awesome-dropzone" class="dropzone"></div>
<link rel="stylesheet" href="./css/dropzone.css">
<style>
<!-- なぜかアップロードしたサムネイルがずれるので補足 -->
.dz-details img{
position:absolute;
top:0;
left:0;
}
</style>
// jQuery本体
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// dropzone.js本体
<script src="dropzone.min.js"></script>
<script>
$(function(){
// 何かの値をPostしたいなら
var hogeParam = "hoge";
// おまじない
Dropzone.autoDiscover = false;
Dropzone.options.myAwesomeDropzone = {
paramName : "file", // input fileの名前
parallelUploads:1, // 1度に何ファイルずつアップロードするか
acceptedFiles:'image/*', // 画像だけアップロードしたい場合
maxFiles:10, // 1度にアップロード出来るファイルの数
maxFilesize:0.5, // 1つのファイルの最大サイズ(1=1M)
dictFileTooBig: "ファイルが大きすぎます。 ({{filesize}}MiB). 最大サイズ: {{maxFilesize}}MiB.",
dictInvalidFileType: "画像ファイル以外です。",
dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。",
};
// urlは実際に画像をアップロードさせるURLパスを入れる
var myDropzone = new Dropzone("div#my-awesome-dropzone",{url:"my_api_upload_img.php"});
// 何か値をpostしたい場合
myDropzone.on("sending", function(file,xhr,formData) {
formData.append("hoge", hogeParam);
});
});
</script>
<?php
require_once("aws.phar");
use AwsS3S3Client;
use AwsCommonEnumRegion;
use AwsS3ExceptionS3Exception;
use AwsCommonAws;
use AwsS3EnumCannedAcl;
use GuzzleHttpEntityBody;
$hogeParam = $_POST['hoge'];
// S3クライアント作成
$client = S3Client::factory(array(
'key' => 'awshogehogeKey',
'secret' => 'awshogehogeSecret',
'region' => Region::AP_NORTHEAST_1
));
// バケット名
$bucketname = 'MyBucket';
$key = "filename.png"
if(!empty($_FILES)){
$files = $_FILES['file'];
$tempFile = $files['tmp_name'];
try {
$result = $client->putObject(array(
'Bucket' => $bucketname,
'Body' => EntityBody::factory(fopen($tempFile, 'r')),
'ContentType' => $files['type'],
'StorageClass' => 'STANDARD',
'Key' => $key,
'ACL' => CannedAcl::PUBLIC_READ,
));
} catch (S3Exception $exc) {
// アップロード失敗
echo $exc->getMessage();
}
}
?>
このプラグインにビビっときたらシェア