上傳圖片前先預覽(多張 fileupload)- 藍色小舖 BlueShop

台灣最大程式設計社群網站

∣免費加入會員∣登入 ∣回首頁∣ 您好

線上人數
1256

會員總數：246713
討論主題：190130

登入

登出

歡迎您免費加入會員

討論區選單

開發工具

行動裝置開發

資料庫

多媒體 / 網管

綜合

文章區

討論區列表 >> Java Script/ Node.js >> 上傳圖片前先預覽(多張 fileupload)

[]

[我要回覆]

上傳圖片前先預覽(多張 fileupload)
價值 : 50 QP 點閱數:699 回應數:1

樓主

MStone Lin

0	113
2244	145

發送站內信

請問
在.net
我利用fileupload 要上傳圖片前先預覽

若一次一張正常
若4個fileupload 搭配
就會出錯

不知我的邏輯導至那邊出錯??
<pre lang="vb">

<form runat ="server" enctype="multipart/form-data">
<div align="center">

<table cellpadding="0" cellspacing="0" class="style6" border ="1">
<tr>
<td>
<asp:FileUpload ID="Fud_Pic" runat="server" onchange="previewFile()"
type="file" accept="image/*" Height="38px" Width="281px" />

<br />

<asp:Image ID="Preview" ImageUrl="nopic.jpg" runat="server" Width="200px"
Height="200px" />

<script language="javascript" type="text/javascript">

function previewFile() {
var preview = document.querySelector('#<%=Preview.ClientID %>');
var file = document.querySelector('#<%=Fud_Pic.ClientID %>').files[0];
var reader = new FileReader();

reader.onloadend = function() {
preview.src = reader.result;
}

if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
</td>
<td>

<asp:FileUpload ID="Fud_Pic1" runat="server" onchange="previewFile1()"
type="file" accept="image/*" Height="38px" Width="281px" />

<br />

<asp:Image ID="Preview1" ImageUrl="nopic.jpg" runat="server" Width="200px"
Height="200px" />

<script language="javascript" type="text/javascript">

function previewFile1() {
var preview1 = document.querySelector('#<%=Preview1.ClientID %>');
var file1 = document.querySelector('#<%=Fud_Pic1.ClientID %>').files[0];
var reader1 = new FileReader();

reader1.onloadend = function() {
preview1.src = reader1.result;
}

if (file1) {
reader1.readAsDataURL(file1);
} else {
preview1.src = "";
}
}

</script>
</td>
</tr>
<tr>
<td>

<asp:FileUpload ID="Fud_Pic2" runat="server" onchange="previewFile2()"
type="file" accept="image/*" Height="38px" Width="281px" />

<br />

<asp:Image ID="Preview2" ImageUrl="nopic.jpg" runat="server" Width="200px"
Height="200px" />

<script language="javascript" type="text/javascript">

function previewFile2() {
var preview2 = document.querySelector('#<%=Preview2.ClientID %>');
var file2 = document.querySelector('#<%=Fud_Pic2.ClientID %>').files[0];
var reader2 = new FileReader();

reader2.onloadend = function() {
preview2.src = reader2.result;
}

if (file2) {
reader2.readAsDataURL(file2);
} else {
preview2.src = "";
}
}
</script>

</td>
<td>

<asp:FileUpload ID="Fud_Pic3" runat="server" onchange="previewFile3()"
type="file" accept="image/*" Height="38px" Width="281px" />

<br />

<asp:Image ID="Preview3" ImageUrl="nopic.jpg" runat="server" Width="200px"
Height="200px" />

<script language="javascript" type="text/javascript">

function previewFile3() {
var preview3 = document.querySelector('#<%=Preview3.ClientID %>');
var file3 = document.querySelector('#<%=Fud_Pic3.ClientID %>').files[0];
var reader3 = new FileReader();

reader3.onloadend = function() {
preview3.src = reader3.result;
}

if (file3) {
reader3.readAsDataURL(file3);
} else {
preview3.src = "";
}
}

</script>

</td>
</tr>
</table>

<asp:Label ID="Label3" runat="server" style="color: #FF0000"></asp:Label>

<br />

<asp:Button ID="Button2" runat="server"
style="font-size: x-large;font-family: 微軟正黑體; font-weight: 700;" Text="完成請清除"
TabIndex="99"/>

       

<asp:Button ID="Button1" runat="server" Text="確定上傳"

style="font-size: x-large; font-family: 微軟正黑體; font-weight: 700; color: #006600"
TabIndex="3" OnClientClick="this.disabled=true;" UseSubmitBehavior="False" />
        

<asp:Button ID="Button3" runat="server" Text="查詢"

style="font-size: x-large; font-family: 微軟正黑體; font-weight: 700; color: #006600"
TabIndex="3" />
</div>
</form>

/pre>

每點選fileupload 皆能預覽
但按下「確定上傳」就會錯誤

請問應如何修正??

搜尋相關Tags的文章： [ java ] , [ fileupload ] , [ jpg ] , [ perview ] ,
本篇文章發表於2020-05-08 09:53

1樓

作者回應

MStone Lin

找到原因了

因圖片總合超過4mb @@

本篇文章回覆於2020-05-08 10:45

== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--

回覆

如要回應,請先登入.