與前端圖像上傳問題

我需要實現圖像上傳，其中縮略圖旁邊出現按鈕..我已經實現它使用函數「getAsDataURL」，...它不工作在鉻和safari ...任何解決方案？與前端圖像上傳問題

<script type="text/javascript"> 
    function setImage(file) { 
     if(document.all) 
      document.getElementById('prevImage').src = file.value; 
     else 
      document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); 
     if(document.getElementById('prevImage').src.length > 0) 
      document.getElementById('prevImage').style.display = 'block'; 
    } 
</script> 


<div class="uploading_block_inner"> 
           <div class="uploaded_img_inner"><img id="prevImage" style="display:none;" width="91" height="91" /></div> 
           <div class="submit_button_upload"> 
            <div class="upload"><input type="file" id="" name="myImage" onchange="setImage(this);" /></div> 
           </div> 
           <div class="upload_submit_inner"><input type="submit" name="" value="" /></div>        
          </div>

來源

2012-04-27 Sachindra

這裏是我認爲Mozilla的非標準getAsDataURL功能還沒有被接受（並且將要刪除的答案http://stackoverflow.com/questions/942105/file-data-from-input-element – GillesC 2012-04-27 07:42:51

Firefox也是）。 – 2012-04-27 07:42:54

假設您使用jQuery，我爲您提供以下解決方案。

$(document).ready(function(){ 
    $('input[type=file]').on('change', setImage); 
}); 

function setImage(file) 
{ 
    if(document.all) 
    { 
    document.getElementById('prevImage').src = file.value; 
    } 
    else 
    { 
    document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); 
    } 

    if(document.getElementById('prevImage').src.length > 0) 
    { 
    document.getElementById('prevImage').style.display = 'block'; 
    } 
}

來源

2012-04-27 07:49:50 rt2800

與問題中相同的代碼...。 – 2012-04-27 08:07:32

對不起...但沒有成功... – Sachindra 2012-04-27 08:55:01

我添加了jQuery文檔準備好的事件處理，但原始代碼 – rt2800 2012-04-27 09:00:50

與前端圖像上傳問題

回答

相關問題