如何以長格式預覽圖像

我希望在將圖像上傳到具有其他字段（例如名稱，年齡等）的表單中之前預覽圖像，我嘗試了ajax解決方案。該代碼獨立運行良好。但是，當我把代碼放入窗體中時，它不起作用.plz幫助我。如何以長格式預覽圖像

代碼如下：通過Ajax

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'> 
Upload your image <input type="file" name="photoimg" id="photoimg" /> 
</form>

和我的表單圖像預覽獨立代碼是

<form name="iupload" action="index.php" method="post" > 
Name <input type="text" name="myname" ><br/> 
Age <input type="text" name="age" > 
<input type="file" name="photoimg" id="photoimg" /> 

<input type="submit" name="submit" value="upload"> 

<div id='preview'> 
</div> 

</form>

來源

2012-01-06 Ashutosh Mishra

你通常並不需要，因爲瀏覽器的文件選擇對話框中顯示有關文件的縮略圖和信息了。 – hakre 2012-01-06 20:57:28

@hakre用戶需要查看上傳的圖片（頭像）的預覽。 – 2012-01-06 21:02:05

您無法使用javascript訪問「」元素的值。出於安全原因，這是被阻止的。所以你不能在這裏創建任何東西。你可能正在尋找一些花哨的HTML5的東西，但你的問題並沒有這麼說。 – hakre 2012-01-06 21:10:47

我要說的是，你可以在支持File API所有的瀏覽器上傳之前顯示本地圖像，老IE版本（版本7及以下）。

使用File API，您可以使用window.URL.createObjectURL方法獲取本地Blob。 IE8測試版引入了一個'僞文件'補充來隱藏本地文件的URL，以解決安全問題，如解釋here。但在舊版本中，您應該能夠「利用」這個安全漏洞。

像這樣的東西可以工作（fiddle）：

$('form input[type=file]').change(function() { 
    var src; 
    if ('files' in this) { // File API supported (webkit/FF) 
     var obj = this.files[0]; 
     src = window.URL ? 
      window.URL.createObjectURL(obj) : 
      window.webkitURL.createObjectURL(obj); 
    } else { 
     if (/fake/.test(this.value)) { 
      // fallback to whatever (IE8, IE9) 
     } else { 
      src = this.value; // exploits the IE security hole 
     } 
    } 
    $(new Image()).attr('src',src).appendTo('body'); // the local image! 
});

來源

2012-01-06 22:32:21 David