javascript - プレビュー画像を表示、送信フォームにアップロード

Question

jquery プラグイン transloadit を使用して、画像を A​​mazon s3 バケットにアップロードしています。
今のところ、サイズを変更して、Amazon の画像フォルダーにアップロードするだけです。

ここで、他の入力フィールドを持つフォームでアップローダを使用したいと思います。画像のアップロード ボタンをクリックして画像を選択すると、画像のプレビューが表示されますが、画像はまだアップロードされていません。フォーム全体の「送信」をクリックすると、画像がアップロードされます。

誰かがこれで私を助けてくれますか？

これは、Amazon に画像をアップロードするための私のコードです。

<form id="UploadForm" action="/index/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="my_file" multiple="multiple" />

$(function() {
    // We reference our html form here
    $('form#UploadForm').transloadit({
        wait: true,
        triggerUploadOnFileSelection: true,
        params: {
            auth: { key: "key" },
            template_id: "templateid"
        }
    });
});


public function uploadAction()
{
    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $transloaditData = $_POST['transloadit'];
    if (ini_get('magic_quotes_gpc') === '1') {
        $transloaditData = stripslashes($transloaditData);
    }
    $transloaditData = json_decode($transloaditData, true);

    foreach ($transloaditData['uploads'] as $upload) {
        // do something with the uploaded file here
    }

    foreach ($transloaditData['results'] as $encodingResult) {
        // do something with the encoding result here here,
        // like saving its URL to the database
    }
}