How to Upload file in javaScript?

Question

When we are uploading a file in html basically we write

<input type="file" />

and this code give ChooseFile button, no file chosen

But what I want is to create a Hyperlink and on clicking the hyperlink for it to work like an input of type="file" type - eg:

<a href="#" >ChooseFile</a>

any suggestions?

you can do this using html5 or you can use any plugin for doing the upload, google it and you will find good plugins. — Mohamed Nagy, Apr 23 '13 at 10:36

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

Don't think that you can style an input=file button beyond a certain limit,

check these links

http://www.quirksmode.org/dom/inputfile.html

Style input type file?

Or you can try a ready made plugin to do the job for you

https://github.com/blueimp/jQuery-File-Upload

edited May 23 '17 at 10:25

Community

1
1

answered Apr 23 '13 at 10:36

gurvinder372

66,980
10
72
94

score 1 · Accepted Answer · answered Apr 23 '13 at 10:47

i think this is help to you..

<!DOCTYPE html>
    <html>
    <body>

    <p>Click on one of the text labels to toggle the related control:</p>

    <div>
      <a href='#UPLOAD' >Upload a file</a>  
      <input type='file'  name='file1'  
           style='cursor:pointer; opacity:0.01; alpha(opacity=1); position:relative; z-index:200; left: -10em; margin:-0.3em;' />   
    </div>

    </body>
    </html>

score 0 · Answer 3 · answered Apr 23 '13 at 10:36

0

Try using an existing jquery plugin for uploading files, i recommend this one:http://blueimp.github.io/jQuery-File-Upload/

answered Apr 23 '13 at 10:36

HasanAboShally

18,459
7
30
34

score 0 · Answer 4 · answered Apr 23 '13 at 13:32

Your best bet is to use a well-documented trick that will ultimately involve hiding the file input element as a child of a div that is styled to meet your needs. I say this is well documented as it is a very FAQ here on SO, and is covered on a number of other sites and blog posts on the internet.

Do not use javascript to click your file input element. You will likely run into security restrictions put in place by browsers. Some browsers may not even allow this. Others such as IE, will throw a security error when/if you attempt to send the file via javascript after using javascript to click the file input element.

If you want to avoid re-inventing the wheel, you can use a pre-built library that handles the complexity of cross-browser file uploading for you. I recommend Fine Uploader. It is well supported, quite active, and evolving quickly. Full Disclosure: I am the primary maintainer of this library.

How to Upload file in javaScript?

4 Answers4