Can I simulate <input type="file"> using <input type="text">?

Question

I want to write a program using simple html input type="text" and a button which will does the functionality of input type="file".

You can make the file input hidden and make the button trigger the file's onclick. It works, but it is a lot of effort — Leandro Barreto
– Leandro Barreto, Commented Dec 6, 2012 at 9:21
My guess is that you want a styled file input. If that's the case, see here: stackoverflow.com/questions/3226167/… — Madara's Ghost
– Madara's Ghost, Commented Dec 6, 2012 at 9:25

M Rostami · Accepted Answer · 2012-12-06 09:22:47Z

1

HTML From :

<input type="file" class="file">
<input type="text" name="file" class="sfile">
<input type="submit" value="send file" name="submit">

css :

.file{
    visibility:hidden; # don't use display:none; because IE compability in js
}

jQuery :

$('.sfile').click(function(){
   $('.file').click();
});
$('.file').change(function(){
  $('.sfile').val($(this).val());
});

answered Dec 6, 2012 at 9:22

M Rostami

4,2051 gold badge39 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dziad Borowy · Accepted Answer · 2012-12-06 09:15:03Z

0

theoretically you could hack it (set 0 opacity to input[file] etc.) but manually typing the path to the text field will not work (will not send a file with the form). It seems a lot of unnecessary hacking. For what reason?

answered Dec 6, 2012 at 9:15

Dziad Borowy

12.6k4 gold badges44 silver badges54 bronze badges

Collectives™ on Stack Overflow

Can I simulate <input type="file"> using <input type="text">?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related