javascript - una - obtener valor de un input file jquery

Use jQuery para obtener el nombre de archivo seleccionado de la entrada del archivo sin la ruta

Question

Usé esto:

$(''input[type=file]'').val()

para obtener el nombre de archivo seleccionado, pero devolvió la ruta completa, como en "C: / fakepath / filename.doc". La parte de "ruta de acceso completa" estaba allí, no estoy seguro de si se supone que debería estar, pero esta es la primera vez que trabajo con el nombre de archivo de las cargas de archivos.

¿Cómo puedo obtener el nombre del archivo (nombre de archivo.doc)?

Answer 1

¿Qué tal algo como esto?

var pathArray = $(''input[type=file]'').val().split(''//');
alert(pathArray[pathArray.length - 1]);

Answer 2

¿Tiene que ser jquery? ¿O puede simplemente usar la yourpath.split("//") nativa yourpath.split("//") JavaScript para dividir la cadena en una matriz?

Answer 3

Así es como lo hago, funciona bastante bien.

En tu HTML haz:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

Luego, en su archivo js, ​​cree una función simple:

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

Si está haciendo múltiples archivos, también debería poder obtener la lista haciendo un bucle sobre esto:

e.target.files[0].name

Answer 4

Chrome devuelve C:/fakepath/... por razones de seguridad: un sitio web no debería poder obtener información sobre su computadora, como la ruta a un archivo en su computadora.

Para obtener solo la parte del nombre de archivo de una cadena, puede usar split() ...

var file = path.split(''//').pop();

jsFiddle .

... o una expresión regular ...

var file = path.match(///([^//]+)$/)[1];

jsFiddle .

... o lastIndexOf() ...

var file = path.substr(path.lastIndexOf(''//') + 1);

jsFiddle .

Answer 5

Consigue que la ruta funcione con todos los sistemas operativos

var filename = $(''input[type=file]'').val().replace(/.*(//|//)/, '''');

Ejemplo

C:/fakepath/filename.doc 
/var/fakepath/filename.doc

Ambos regresan

filename.doc
filename.doc

Answer 6

Obtenga el primer archivo del control y luego obtenga el nombre del archivo, ignorará la ruta del archivo en Chrome y también corregirá la ruta para los navegadores IE. Al guardar el archivo, debe usar System.io.Path.GetFileName método System.io.Path.GetFileName para obtener el nombre del archivo solo para los navegadores IE

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
} 

Answer 7

Solo necesitas hacer el código a continuación. El primero [0] es acceder al elemento HTML y el segundo [0] es acceder al primer archivo de la carga del archivo (incluí una validación en caso de que no haya ningún archivo):

    var filename = $(''input[type=file]'')[0].files.length ? (''input[type=file]'')[0].files[0].name : "";

Answer 8

tal vez alguna adición para evitar el camino falso

var fileName = $(''input[type=file]'').val();
var clean=fileName.split(''//').pop(); // clean from C:/fakepath OR C:/fake_path 
alert(''clean file name : ''+ fileName);

Answer 9

<script type="text/javascript">

    $(''#upload'').on(''change'',function(){
       // output raw value of file input
       $(''#filename'').html($(this).val().replace(/.*(//|//)/, '''')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(//|//)/, '''');
        // .. do your magic

        $(''#filename'').html(filename);
    });
</script>

Answer 10

var filename = $(''input[type=file]'').val().split(''//').pop();

o simplemente podría hacerlo (porque siempre se agrega C:/fakepath por razones de seguridad):

var filename = $(''input[type=file]'').val().replace(/C://fakepath///i, '''')

Answer 11

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);