顯示預覽圖像，上傳到提交表單

Question

我正在使用jquery插件transloadit將圖像上傳到我的Amazon s3存儲桶。
我現在所擁有的只是一個簡單的調整大小，並上傳到我在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
    }
}

Answer 1

嘗試FileReader

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

http://jsfiddle.net/LvsYc/