StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Problem is IE wouldn't let you submit a file through javascript, user have to click the file input. It is a known problem, described here:</p> <p><code>When an file-input is opened via a scripted, forced click() event, IE won't let you submit the form. If you click the file-input via your own mouse (what we don't want), IE will let you submit the form.</code><a href="https://stackoverflow.com/a/13954595/690329">Open file input dialog and upload onchange possible in IE?</a></p> <p>and also here: <a href="https://stackoverflow.com/q/14560121/690329">File Upload Using Javascript returns 'Access Denied' Error With Stylized to a button</a></p> <p>So, you have to trick the user, make the file-input transparent and place your button under the file-input. When user will click your button, they will click the file input instead.</p> <p>With the css (probably you will need to tweak it) your markup should look like below:</p> <pre><code><%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <style type="text/css"> .fileContainer { overflow: hidden; position: relative; } #FileUploaddd2 { position: relative; text-align: right; -moz-opacity: 0; filter: alpha(opacity: 0); opacity: 0; z-index: 2; left: -130px; } #Button2 { position: absolute; top: 0px; left: 0px; z-index: 1; } </style> <title></title> </head> <body> <form id="form1" runat="server"> <div> <label class="fileContainer"> <input id="Button2" type="button" value="Attach a File" /> <input type="file" id="FileUploaddd2" runat="Server" /> </label> <br /> <br /> <asp:Button ID="btnSubmit" runat="server" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" Text="Submit" /> </div> </form> </body> </html> </code></pre> <p>And in the code behind you can catch the submitted file</p> <pre><code>Protected Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click Dim file As System.Web.HttpPostedFile = FileUploaddd2.PostedFile If Not file Is Nothing Then 'Save file? End If End Sub </code></pre> <p><strong>EDIT:</strong> If you want to show the filename in a label, you can do the following:</p> <p>In Input file's change event call a jsfunction: </p> <pre><code><input type="file" id="FileUploaddd2" runat="Server" onchange="setlabelvalue();" /> </code></pre> <p>Add a label to display filename:</p> <pre><code><asp:Label ID="lblFileName" runat ="server" Text=""></asp:Label> </code></pre> <p>Add the setlabelvalue() js function: </p> <pre><code>function setlabelvalue() { var filename = document.getElementById("FileUploaddd2").value; var lastIndex = filename.lastIndexOf("\\"); if (lastIndex >= 0) { filename = filename.substring(lastIndex + 1); } document.getElementById('<%=lblFileName.ClientID%>').innerHTML = filename; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload