台灣最大程式設計社群網站
線上人數
1108
 
會員總數:245908
討論主題:189500
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> 上傳圖片前先預覽(多張 fileupload)
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
上傳圖片前先預覽(多張 fileupload)
價值 : 50 QP  點閱數:115 回應數:1
樓主

MStone Lin
門外漢
0 93
1818 123
發送站內信

請問
在.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"/>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<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" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<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
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.