469,612 Members | 1,616 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,612 developers. It's quick & easy.

Get file path and file name of input type="file"

59
alright suppose i have the following.

Expand|Select|Wrap|Line Numbers
  1. <input type="file" name="upload"  />
  2. <input type="text" name="discription"  />
  3. <input type="image" onclick="addFile();" src="images/addfile.jpg" name="add" alt="Add file" />
Here when user clicks add button, it gets added dynamically in to a div. Which all good and nice, i have very well done so.

But here is the problem, on that parent div there are children, children divs contains the input which displays it's file name and hidden div containing file path, and another hidden input containing the description. As user adds files, they keep getting added in a list fashion.

I plan to get process the values through array on the form submission. By the way there is only form on the parent div containing the child divs. not where the file input is.

What i want is that, i want to get the file path in javascript string as well as file name in another string. How can i go on about doing this.

Hope i was clear in explaining it.
Sep 27 '07 #1
5 33724
pbmods
5,821 Expert 4TB
Heya, cssExp.

My recommendation would be to put each set of inputs in its own div:

Expand|Select|Wrap|Line Numbers
  1. <form id="thePfhorm" ... >
  2.     .
  3.     .
  4.     .
  5.     <div id="insertBefore" style="display: none;">&nbsp;</div>
  6. </form>
  7.  
  8. <div style="display: none;">
  9.     <div id="dolly">
  10.         <input type="file" onchange="setInputs(this.parentNode);" ... />
  11.         .
  12.         .
  13.         .
  14.     </div>
  15. </div>
  16.  
Expand|Select|Wrap|Line Numbers
  1. function addFile(  )
  2. {
  3.     var newElement = document.getElementById('dolly').cloneNode(true);
  4.     newElement.id = '';
  5.     document.getElementById('thePfhorm').insertBefore( newElement, document.getElementById('insertBefore') );
  6.     .
  7.     .
  8.     .
  9. }
  10.  
  11. function setInputs( parent )
  12. {
  13.     var inputs = parent.getElementsByTagName('input');
  14.  
  15.     inputs[1].value = inputs[0].value.match( ... );
  16.     .
  17.     .
  18.     .
  19. }
  20.  
Sep 28 '07 #2
cssExp
59
I have very well done the parent and child part, only part was that i needed to get both filepath and filename, but i found out how to do it. I took the file path and from it i extracted the the file name using lastIndexOf("\\") and substring combination. Thanks for all your help.
Sep 28 '07 #3
pbmods
5,821 Expert 4TB
Heya, cssExp.

Glad to hear you got it working! Good luck with your project, and if you ever need anything, post back anytime :)
Sep 28 '07 #4
I have very well done the parent and child part, only part was that i needed to get both filepath and filename, but i found out how to do it. I took the file path and from it i extracted the the file name using lastIndexOf("\\") and substring combination. Thanks for all your help.

Hey I am facing a similar problem. Can you tell me how did you solve this issue.
I need to get the file path from the web form and then pass it as a parameter to an external program. How do I fetch the entire path through cgi?
Mar 20 '08 #5
acoder
16,027 Expert Mod 8TB
Hey I am facing a similar problem. Can you tell me how did you solve this issue.
I need to get the file path from the web form and then pass it as a parameter to an external program. How do I fetch the entire path through cgi?
Post your code. You mention cgi. Do you need this on the client-side or the server-side?
Mar 20 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Mr Gordonz | last post: by
2 posts views Thread by IkBenHet | last post: by
7 posts views Thread by Tim Slattery | last post: by
reply views Thread by devrayhaan | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.