今更ながらのdropzone.jsプラグインですが、今やファイルアップロードではドラッグ＆ドロップが必須ですので念のため紹介しておきます。ちなみにサンプルコードはAWSのS3のアップロードにしています。
是非デモで動きを確認してみてくださいね。デモは実際には画像を保存するようにしていないので安心して下さい。

dropzone.jsのオススメ/ポイント

dropzone.jsのデモ

dropzone.jsのページ

dropzone.jsの使い方

それではdropzone.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<div id="my-awesome-dropzone" class="dropzone"></div>

CSSコード

<link rel="stylesheet" href="./css/dropzone.css">
<style>
<!-- なぜかアップロードしたサムネイルがずれるので補足 -->
.dz-details img{
    position:absolute;
    top:0;
    left:0;
}
</style>

JavaScriptコード

// 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();
    }
}
?>

チェックポイント

プラグインへ一言

AWS S3 アップロード ファイル

---