Usabilitat per a pujar imatges (nivell 1)

Si tenim un site on és possible pujar imatges, podem millorar la horrorosa usabilitat del <input type=”file”/> fent que el submit no estigui activat fins que hi hagi una imatge carregada, gràcies al fabulós jquery.

Tenint un XHTML:


<input name="imatge" type="file"/>
<input type="button" name="enviar" id="enviar"/>

podem afegir el següent script:

<script>
$(document).ready(function(){
if ((document.forms[0].imatge.value=="")) {
document.forms[0].enviar.disabled=true;
$("input#enviar").css({ color: "#fff", background: "orange" });
}
$("input").change( function() {
if (!(document.forms[0].imagen.value==""))
{
document.forms[0].enviar.disabled=false;
$("input#enviar").css({ color: "#fff", background: "orange" });
}
else {
document.forms[0].enviar.disabled=true;
$("input#enviar").css({ color: "#888", background: "#eee" });
}
} );
});
</script>

Segurament és molt optimitzable, però en 5 minuts no em demaneu més :-)

Coneixes altres mètodes per fer més usables els uploads de imatges?

0 comments ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment