Fileupload控制元件點選“瀏覽”按鈕，選擇圖片後需要立即顯示所選擇的圖片
阿新 • • 發佈：2019-01-04
function showimg()
{
document.getElementById("<%=Image1.ClientID %>").src=document.getElementById("<%=File1.UniqueID %>").value;
}
</script>HTML:
<asp:Image ID="Image1" runat="server" Width="150px" Height="200px"></asp:Image>
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" />
經過測試，在一些機器上能立即顯示圖片，但有些機器上卻不顯示圖片。我不知道是不是跟瀏覽器的安全設定有關。怎麼解決？
css程式碼
{
document.getElementById("<%=Image1.ClientID %>").src=document.getElementById("<%=File1.UniqueID %>").value;
}
</script>HTML:
<asp:Image ID="Image1" runat="server" Width="150px" Height="200px"></asp:Image>
<input id="File1" style="width: 489px; height: 22px" onfocus="showimg()" type="file" name="File1" runat="server" />
經過測試，在一些機器上能立即顯示圖片，但有些機器上卻不顯示圖片。我不知道是不是跟瀏覽器的安全設定有關。怎麼解決？
解決方案 »
- 問題是家裡是ie6可以的，當公司也是IE6就是顯示不出來。而且我右鍵圖片->屬性,顯示的檔名也是我Fileupload控制元件所選中的圖片名
<asp:Image ID="Image1" runat="server" Height="181px" Width="221px"
BorderColor="#000001" ImageUrl="~/admin/UserPhoto/201404272323258370.jpg"/>
<div id="newPreview"></div>
<asp:FileUpload ID="FileUpload1" runat="server" onchange="previewPic()" />css程式碼
#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)} function previewPic() {
var filePath = $("#FileUpload1");
var picPath = $("#Image1");
//if (!filePath || !filePath.value || !picPath) return;
var extensionName = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
if (extensionName.test(filePath.val())) {
var newPreview = document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = filePath.val();
newPreview.style.width = "120px";
newPreview.style.height = "90px";
$("#Image1").remove();
}
else {
alert("您選擇的似乎不是影象檔案。");
}
}