Cloning input type file and set the value

Posted by jribeiro on Stack Overflow See other posts from Stack Overflow or by jribeiro
Published on 2012-07-09T03:05:39Z Indexed on 2012/07/09 3:15 UTC
Read the original article Hit count: 261

I know that it isn't possible to set the value of an input type="file" for security reasons...

My problem is:

I needed to style an input type="file" so what I did was have a button and hide the file input. like:

<a href="#" onclick="$('input[name=&quot;photo1&quot;]').click(); return false;" id="photo1-link"></a>
<input type="file" name="photo1" class="fileInput jqtranformdone validate[required]" id="photo1" />

These works great in all browsers except IE which gives me an access denied error on submitting through ajax.

I'm using the ajaxSubmit jquery plugin (malsup.com/jquery/form/)

So after reading for a while I tried to do:

var photo1Val = $('#photo1').val();
var clone1 = $('#photo1').clone().val(photo1Val);
$('#photo1').remove();

clone1.appendTo('form');
console.log(photo1Val) //prints the right value C:/fakepath/blablabla.jpg
$('form').ajaxSubmit(options);

The problem is that after this the value of $('#photo1') is empty... Any ideas how to work around this?

Thanks

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about html