By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,069 Members | 1,716 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,069 IT Pros & Developers. It's quick & easy.

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

P: 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
Share this Question
Share on Google+
5 Replies


pbmods
Expert 5K+
P: 5,821
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

P: 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
Expert 5K+
P: 5,821
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

P: 1
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
Expert Mod 15k+
P: 16,027
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.