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

Question

我正在使用jQuery插件transloadit將圖像上傳到我的亞馬遜S3存儲桶。
我現在擁有的只是一個簡單的調整大小並上傳到我的亞馬遜圖片文件夾。

現在我想用其他輸入字段的形式使用上傳器。如果您在點擊圖片上傳按鈕時選擇了一張圖片，您會看到該圖片的預覽，但該圖片尚未上傳。當您點擊整個表格的「提交」時，圖片就會上傳。

有人能幫我解決這個問題嗎？

這是我的圖片上傳代碼亞馬遜：

<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/