在點擊提交按鈕之前顯示上傳的圖像

我想在點擊上傳按鈕之前顯示上傳的圖像。我嘗試過，但沒有工作，請檢查下面的代碼。當我選擇一個圖像加載然後沒有圖像會來，並在螢火蟲的幫助後，我發現我的代碼正在做怪異的網址。您還可以檢查小提琴這裏：在點擊提交按鈕之前顯示上傳的圖像

腳本

$(document).ready(function(e) { 
    $('#upload').click(function(){ 
     $('input[type="file"]').show().focus().click().hide(); 
     $('input[type="file"]').change(function(){ 

      var val = $('this').val; 
      $('.img').append('<img src="'+val+'" />') 

      }) 
     }) 
})

HTML

<form id="form1" name="form1" method="post" action=""> 
<input name="" type="file" /> 
<div id="upload">Upload</div> 
<div class="img"></div> 
</form>

風格

#upload{float:left; padding:8px 10px; color:#000; background:#CCC; border:1px solid #000;} 
input[type="file"]{display:none;}

來源

2013-09-24 Kamal

這不會像您期望的那樣工作，因爲通常瀏覽器會在上傳之前將路徑指向圖像。爲了實現這一點，您需要使用HTML5或其他方法。 – BenM

[上傳前預覽圖像]可能重複（http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded） –

您的需求是否需要它在IE以及？如果是的話，那麼你將不得不在你的服務器上的某個地方保存圖像，然後才能使用其他表單提交 –

，如果你的要求是比IE 其他瀏覽器的工作，那麼你可以按照this link，它有完美的答案你

但如果你的要求還包括IE 然後你做幾步第1步：創建一個不同的表格，除了你的主表格之外，這個不同的表格不能作爲表格裏面的表格不能被提交。

第2步：您的新形式內保持

<input type="file" name="imageFileChooser"/>

第3步：在文件字段的更改事件調用一個Ajax功能

第4步：這個AJAX功能提交您的新形式，只有圖像字段，並將圖像存儲在服務器端

步驟5：當您想要預覽表單時，需要從服務器調用臨時保存的圖像。

第6步：預覽和提交後提交主窗體並從服務器的臨時位置拍攝圖像，或者您也可以保留一個帶有相同文件的隱藏文件iput標記。

來源

2013-09-24 10:20:47

在HTML

：

<input type='file' onchange="readURL(this);" />

的JavaScript/JQuery的通過類型FileReader

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]); 
    }

其中input是<input type="file">元素如果使用AjaxToolKit AsyncFileUpload，您可以用獲取輸入：fileUploadElement.get_inputFile()

請參考：how to preview a image before and after upload?

來源

2014-01-29 14:03:37

在點擊提交按鈕之前顯示上傳的圖像

回答

相關問題