If i click hyperlink Called Attach file than the Browse Window have to appear

Question

5.00/5 (1 vote)

See more:

I am having a hyperlink called Attach file .If i click on that hyperlink "Attach File" than the browse window should have to appear .Can any one help me to do this

Posted 10-Jul-12 21:21pm

Imran D

Add a Solution

2 solutions

Solution 1

Use the Window[^] object in JavaScript, in an onclick event of the link, with href="#". Or simply use the href as normally, and add a target="_blank", but you will have no control over the window.
By the way "should have to appear" is unclear since it has to be visible to click on a link...

Posted 10-Jul-12 21:29pm

Zoltán Zörgő

Comments

Imran D 11-Jul-12 3:37am

But how browse window appears? i dint get u

Zoltán Zörgő 11-Jul-12 3:41am

Sorry, I have misunderstood you! I meant "web browser windows", but you want the "file browser dialog" to appear. Ok, than see pradiprenushe's answer.

Imran D 11-Jul-12 4:31am

Thank U

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

pradiprenushe · Accepted Answer · 2012-07-10T21:37:00

Solution 2

Add this javascript function.

function clickfp() {
    var objFp = document.getElementById('<%= fpUpload.ClientID %>');
    objFp.click();
}

Call javascript function on hyperlink onclick.

XML

<input type="file" id="fpUpload" runat="server" name="filediag" style="display:none" />
   <asp:HyperLink ID="hlClick" runat="server" Text="Upload" onclick="clickfp();"></asp:HyperLink>

Posted 10-Jul-12 21:37pm

pradiprenushe

Comments

Imran D 11-Jul-12 4:34am

Thank you pradiprenushe . Its working , but the file upload control is enabled, what should i do to disable the file upload control?

pradiprenushe 11-Jul-12 4:41am

enabled means is it visible?

Imran D 11-Jul-12 4:47am

Ya file upload control is visible, it should be in disable position.only If i click on that hyperlink "Attach File" than the browse window should have to appear.By clicking Both hyperlink "Attach File" & file upload the browse window is appearing.Its like Gmail.When you click on attach file in Gmail the browse window will appears.Like that i want.I dont want file upload control

pradiprenushe 11-Jul-12 5:20am

can u paste your code? Actually file upload it should not display.

Imran D 11-Jul-12 5:31am

<pre lang="HTML"><head runat="server">
<script type="text/javascript" language="javascript">
function clickfp() {
var objFp = document.getElementById('objFileUpload');
objFp.click();
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" onclick="clickfp();">Add file
<br />

<asp:FileUpload ID="objFileUpload" runat="server" />
<br />
<br />
<asp:Button ID="btnUpload" runat="server" onclick="btnUpload_Click"
Text="Upload" />
<br />

</div>
</form>
</body></pre>

pradiprenushe 11-Jul-12 5:40am

Add style
<style>
.hide
{
display:none;
}
</style>

<asp:FileUpload ID="objFileUpload" runat="server" CssClass="hide" />

Imran D 11-Jul-12 5:47am

ya its working. File upload is disabled .But if I attach any file means its not showing the file name which i have attached.

pradiprenushe 11-Jul-12 5:57am

function uploadFileChange() {

document.getElementById('FileName').value = document.getElementById("FileUpload1").value;

}

<asp:TextBox ID="FileName" runat="server" >

<asp:FileUpload ID="objFileUpload" runat="server" CssClass="hide"
onpropertychange="uploadFileChange();" /> // or use onchange event

OR
If you want filename at server side simply get it by
objFileUpload.PostedFile.FileName

Imran D 11-Jul-12 6:13am

This is the code which i have added ,its not working, instead of textbox can we use label to display the attached file name.

<head runat="server">
<script type="text/javascript" language="javascript">
function clickfp() {
var objFp = document.getElementById('objFileUpload');
objFp.click();
}
function uploadFileChange() {

document.getElementById('FileName').value = document.getElementById("objFileUpload").value;

}
</script>

<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<style>
.hide
{
display:none;
}
</style>

<br />
<asp:TextBox ID="FileName" runat="server">

<asp:FileUpload ID="objFileUpload" runat="server" CssClass="hide" onpropertychange="uploadFileChange()"/>

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" onclick="clickfp()">Add file
<br />
<br />
<asp:Button ID="btnUpload" runat="server" onclick="btnUpload_Click"
Text="Upload" />
<br />

</div>
</form>
</body>

pradiprenushe 11-Jul-12 6:18am

change this & copy alert message
function uploadFileChange() {
alert('start');
alert(document.getElementById("objFileUpload").value);
document.getElementById('FileName').value = document.getElementById("objFileUpload").value; }

Imran D 11-Jul-12 6:26am

Its not working .Instead of textbox can we use label to display the attached file name.
This is the code

<head runat="server">
<script type="text/javascript" language="javascript">
function clickfp() {
var objFp = document.getElementById('objFileUpload');
objFp.click();
}
function uploadFileChange() {
alert('start');
alert(document.getElementById("objFileUpload").value);
document.getElementById('FileName').value = document.getElementById("objFileUpload").value;
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<style>
.hide
{display:none;
}
</style>
<div>

<br />
<asp:TextBox ID="FileName" runat="server">
<asp:FileUpload ID="objFileUpload" runat="server" CssClass="hide" onpropertychange="uploadFileChange()"/>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" onclick="clickfp()">Add file
<br />
<br />
<asp:Button ID="btnUpload" runat="server" onclick="btnUpload_Click"
Text="Upload" />
<br />
</div>
</form>
</body>

pradiprenushe 11-Jul-12 6:52am

Dont change anything this is working code.

<head id="Head1" runat="server">

<script type="text/javascript" language="javascript">
function clickfp() {
var objFp = document.getElementById('<%= objFileUpload.ClientID %>');
objFp.click();
}
function uploadFileChange() {
alert('start');
alert(document.getElementById('<%= objFileUpload.ClientID %>').value);
document.getElementById('<%= FileName.ClientID %>').value = document.getElementById('<%= objFileUpload.ClientID %>').value;
} </script>

<title></title>
</head>
<body>
<form id="form1" runat="server">
<style>
.hide
{
display: none;
}
</style>
<div>
<br />
<asp:TextBox ID="FileName" runat="server" />
<asp:FileUpload ID="objFileUpload" runat="server" CssClass="hide" onchange="uploadFileChange()"/>
<asp:HyperLink ID="HyperLink1" runat="server" onclick="clickfp()">Add file <br />

<br /> <asp:Button ID="btnUpload" runat="server" onclick="btnUpload_Click" Text="Upload" /> <br />
</div>
</form>
</body>

Imran D 11-Jul-12 7:34am

But It is showing Fake Path like this

C:\fakepath\abcdt.xlsx

Imran D 11-Jul-12 7:28am

Thank u So much its working .Instead of textbox can we use label to display the attached file name. Please Let me know

pradiprenushe 11-Jul-12 7:38am

1.Just add label insted of textbox.
2. Add label id in the place of textbox id in this line
document.getElementById('<%= FileName.ClientID %>').value = document.getElementById('<%= objFileUpload.ClientID %>').value;

Imran D 11-Jul-12 7:47am

Ya did The Same thing its not getting

pradiprenushe 11-Jul-12 8:02am

document.getElementById('<%= lblFile.ClientID %>').innerHTML = document.getElementById('<%= objFileUpload.ClientID %>').value;

<asp:Label ID="lblFile" runat="server" />

Imran D 11-Jul-12 8:22am

Ya got It Thanks a lot.
But when i select an file It is showing Fake Path like this
"C:\fakepath\abcdt.xlsx "
the actual Path is
"C:\Users\Public\Pictures\Sample Pictures\abcdt.xlsx"

Imran D 12-Jul-12 1:42am

please suggest me