key events jquery
jQuery: obtenga el nombre de archivo seleccionado de<input type="file"/> (8)
Agregue un botón de reinicio oculto:
<input id="Reset1" type="reset" value="reset" class="hidden" />
Haga clic en el botón de reinicio para borrar la entrada.
$("#Reset1").click();
Este código debería funcionar en IE (ni siquiera probarlo en Firefox), pero no es así. Lo que quiero es mostrar el nombre del archivo adjunto. ¿Alguna ayuda?
<html>
<head>
<title>example</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$("#attach").after("<input id=''fakeAttach'' type=''button'' value=''attach a file'' />");
$("#fakeAttach").click(function() {
$("#attach").click();
$("#maxSize").after("<div id=''temporary''><span id=''attachedFile''></span><input id=''remove'' type=''button'' value=''remove'' /></div>");
$(''#attach'').change(function(){
$("#fakeAttach").attr("disabled","disabled");
$("#attachedFile").html($(this).val());
});
$("#remove").click(function(e){
e.preventDefault();
$("#attach").replaceWith($("#attach").clone());
$("#fakeAttach").attr("disabled","");
$("#temporary").remove();
});
})
});
</script>
</head>
<body>
<input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>
</body>
</html>
Es tan simple como escribir:
$(''input[type=file]'').val()
De todos modos, sugiero usar el nombre o el atributo ID para seleccionar su entrada. Y con el evento, debería verse así:
$(''input[type=file]'').change(function(e){
$in=$(this);
$in.next().html($in.val());
});
He usado el siguiente que funcionó correctamente.
$(''#fileAttached'').attr(''value'', $(''#attachment'').val())
La forma más simple es simplemente usar la siguiente línea de jquery , con esto no obtienes el /fakepath sin sentido, obtienes el archivo que se cargó:
$(''input[type=file]'')[0].files[0]; // This gets the file
$(''#idOfFileUpload'')[0].files[0]; // This gets the file with the specified id
Algunos otros comandos útiles son:
Para obtener el nombre del archivo:
$(''input[type=file]'')[0].files[0].name; // This gets the file name
Para obtener el tipo de archivo:
Si tuviera que subir un PNG, devolvería image/png
$("#imgUpload")[0].files[0].type
Para obtener el tamaño (en bytes) del archivo:
$("#imgUpload")[0].files[0].size
Además, no tiene que usar estos comandos on(''change'' , puede obtener los valores en cualquier momento, por ejemplo, puede tener una carga de archivo y cuando el usuario hace clic en upload , simplemente usa los comandos que enumeré.
$(''input[type=file]'').change(function(e){
$(this).parents(''.parent-selector'').find(''.element-to-paste-filename'').text(e.target.files[0].name);
});
Este código no mostrará C:/fakepath/ antes del nombre del archivo en Google Chrome en caso de usar .val() .
<input onchange="readURL(this);" type="file" name="userfile" />
<img src="" id="blah"/>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(''#blah'')
.attr(''src'', e.target.result)
.width(150).height(200);
};
reader.readAsDataURL(input.files[0]);
//console.log(reader);
//alert(reader.readAsDataURL(input.files[0]));
}
}
</script>
<input onchange="readURL(this);" type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
function readURL(fileName) {
if (fileName.files && fileName.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(''#viewImage'')
.attr(''src'', e.target.result)
.width(150).height(200);
};
reader.readAsDataURL(fileName.files[0]);
}
}
</script>
//get file input
var $el = $(''input[type=file]'');
//set the next siblings (the span) text to the input value
$el.next().text( $el.val() );