顯示圖像，而上傳

我以前問過這個問題，但我沒有得到這個真正的解決方案。我正在開發一個社交網站。在用戶註冊頁面，用戶有規定添加一張照片。我的問題是我想要顯示用戶上傳到div的圖像，然後單擊表單末尾的提交按鈕。我搜索了很多，但無法找到正確的圖像。顯示圖像，而上傳

我的HTML代碼是這樣的：

<img src="<?php echo $row_picture;?>" name="picture" class="settingspic" width="75" height="91" alt="profile pic" name="picture"/><a href="" onclick="return uploadimg()"> Upload</a></li> 
<input type="file" name="file" id="file" style="display:none;" />

我的JavaScript代碼是：

function uploadimg() 
{ 
var uploader = document.getElementById('file'); 
uploader.click(); 
return false; 
}

當我點擊提交按鈕，圖像插入database.I希望圖像是當用戶上傳文件時顯示。

來源

2013-01-24 Techy

上傳的文件。將它保存到臨時的某個地方（數據庫將工作）並將其設置爲圖像src。當使用單擊「確定」時，將其保存到最終位置並將「src」更新爲最終資源。 – 2013-01-24 08:00:29

如果您需要在上傳時顯示圖片，我認爲您需要一些Flash腳本。否則，我不認爲你可以使用JavaScript來訪問本地文件來顯示它。 –

其實看來我錯了。這個鏈接中有一些示例代碼。 http://www.html5rocks.com/en/tutorials/file/dndfiles/它使用html5。 –

這是我在我們的網站上使用的。這是爲了在上傳之前預覽圖像，即在提交表單之前。你的問題有點不同，但我希望這可以幫助。

HTML：

<img id="preview_img" style="max-width: 130px; max-height: 130px;" src="http://www.domain.com/images/<?php echo $this->profile_details->photo? $this->profile_details->photo: "default.png"; ?>"/> 
<input type="file" id="avatar" name="avatar" onchange="readURL(this);"/>

的JavaScript：

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

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

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

來源

2013-01-24 08:02:14 enenen

顯示圖像，而上傳

回答

相關問題