blocks|key|648844|text|var+filename+=+$('input[type=file]').val().split('\\').pop();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|648845|或者您可以直接这样做(因为出于安全原因，添加的总是C:\fakepath+)：|unstyled|offset|length|style|CODE|648846|var+filename+=+$('input[type=file]').val().replace(/C:\\fakepath\\/i,+'')|648847|entityMap^0|0|P|B|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@$G|Q|H|R|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>var filename = $('input[type=file]').val().split('\\').pop();
</code></pre>

or you could just do (because it's always <code>C:\fakepath</code> that is added for security reasons):

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

blocks|key|866590|text|你只需要做下面的代码。第一个是访问HTML元素，第二个是访问文件上传的第一个文件(我在没有文件的情况下包含了一个验证)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|866591|++++var+filename+=+$('input[type=file]')[0].files.length+?+('input[type=file]')[0].files[0].name+:+"";|code-block|syntax|javascript|866592|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You just need to do the code below. The first [0] is to access the HTML element and second [0] is to access the first file of the file upload (I included a validation in case that there is no file):

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

blocks|key|866300|text|由于安全原因，Chrome返回C:\fakepath\...+-网站不应该能够获得关于你的计算机的信息，例如你计算机上的文件的路径。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|866301|要只获取字符串的文件名部分，可以使用split()...|866302|var+file+=+path.split('\\').pop();|code-block|syntax|javascript|866303|jsFiddle。|866304|...or+a+regular+expression...|866305|var+file+=+path.match(/\\([%5E\\]%2B)$/)[1];|866306|866307|...or+lastIndexOf()...|866308|var+file+=+path.substr(path.lastIndexOf('\\')+%2B+1);|866309|866310|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split|1|http://jsfiddle.net/alexdickson/4j3ZG/|2|https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions|3|http://jsfiddle.net/alexdickson/svSfs/|4|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/lastIndexOf|5|http://jsfiddle.net/alexdickson/8mQVC/^0|F|F|0|I|7|I|7|0|0|0|0|8|1|0|8|I|2|0|0|0|8|3|0|6|D|6|D|4|0|0|0|8|5|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|H|3|I|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|O|3|P|5|6|7|1U|8|@]|D|@$9|1V|A|1W|1|1X]]|E|$]]|$1|Q|3|R|5|J|7|1Y|8|@]|D|@]|E|$K|L]]|$1|S|3|N|5|6|7|1Z|8|@]|D|@$9|20|A|21|1|22]]|E|$]]|$1|T|3|U|5|6|7|23|8|@$9|24|A|25|B|C]]|D|@$9|26|A|27|1|28]]|E|$]]|$1|V|3|W|5|J|7|29|8|@]|D|@]|E|$K|L]]|$1|X|3|N|5|6|7|2A|8|@]|D|@$9|2B|A|2C|1|2D]]|E|$]]|$1|Y|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]|18|$5|11|12|13|E|$14|19]]|1A|$5|11|12|13|E|$14|1B]]|1C|$5|11|12|13|E|$14|1D]]|1E|$5|11|12|13|E|$14|1F]]]]

Chrome returns <code>C:\fakepath\...</code> for security reasons - a website should not be able to obtain information about your computer such as the path to a file on your computer.

To get just the filename portion of a string, you can use <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split" rel="noreferrer"><code>split()</code></a>...

<pre><code>var file = path.split('\\').pop();
</code></pre>

<a href="http://jsfiddle.net/alexdickson/4j3ZG/" rel="noreferrer">jsFiddle</a>.

...or a <a href="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions" rel="noreferrer">regular expression</a>...

<pre><code>var file = path.match(/\\([^\\]+)$/)[1];
</code></pre>

<a href="http://jsfiddle.net/alexdickson/svSfs/" rel="noreferrer">jsFiddle</a>.

...or <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/lastIndexOf" rel="noreferrer"><code>lastIndexOf()</code></a>...

<pre><code>var file = path.substr(path.lastIndexOf('\\') + 1);
</code></pre>

<a href="http://jsfiddle.net/alexdickson/8mQVC/" rel="noreferrer">jsFiddle</a>.

blocks|key|866458|text|Get+path适用于所有操作系统|type|unstyled|depth|inlineStyleRanges|entityRanges|data|866459|var+filename+=+$('input[type=file]').val().replace(/.*(\/%7C\\)/,+'');|code-block|syntax|javascript|866460|示例|866461|C:\fakepath\filename.doc+
/var/fakepath/filename.doc|866462|两者都返回|866463|filename.doc
filename.doc|866464|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Get path work with all OS

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

Example

<pre><code>C:\fakepath\filename.doc 
/var/fakepath/filename.doc
</code></pre>

Both return

<pre><code>filename.doc
filename.doc
</code></pre>

blocks|key|866400|text|这就是我是如何做的，它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|866401|在HTML中执行以下操作：|866402|<input+type="file"+name="Att_AttributeID"+onchange="fileSelect(event)"+class="inputField"+/>|code-block|syntax|javascript|866403|然后在js文件中创建一个简单的函数：|866404|function+fileSelect(id,+e){
++++console.log(e.target.files[0].name);
}|866405|如果你正在处理多个文件，你也应该能够通过循环遍历下面的代码来获得列表：|866406|e.target.files[0].name|866407|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here is how I do it, it works pretty well.

In your HTML do:

<pre><code>&lt;input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" /&gt;
</code></pre>

Then in your js file create a simple function:

<pre><code>function fileSelect(id, e){
 console.log(e.target.files[0].name);
}
</code></pre>

If you're doing multiple files, you should also be able to get the list by looping over this:

<pre><code>e.target.files[0].name
</code></pre>

blocks|key|649001|text|也许可以为避免fakepath添加一些内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|649002|var+fileName+=+$('input[type=file]').val();
var+clean=fileName.split('\\').pop();+//+clean+from+C:\fakepath+OR+C:\fake_path+
alert('clean+file+name+:+'%2B+fileName);|code-block|syntax|javascript|649003|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

maybe some addition for avoid fakepath:

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

blocks|key|866101|text|像这样怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|866102|var+pathArray+=+$('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length+-+1]);|code-block|syntax|javascript|866103|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

How about something like this?

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

blocks|key|866221|text|一定要是jquery吗？或者，是否可以只使用JavaScript的原生yourpath.split("\\")将字符串拆分成数组？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|866222|entityMap^0|Z|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Does it have to be jquery? Or can you just use JavaScript's native <code>yourpath.split("\\")</code> to split the string to an array?

blocks|key|649176|text|从控件中获取第一个文件，然后获取文件的名称，它将忽略Chrome上的文件路径，也将更正IE浏览器的路径。保存文件时，您必须使用System.io.Path.GetFileName方法来获取仅适用于IE浏览器的文件名|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|649177|var+fileUpload++++=+$("#ContentPlaceHolder1_FileUpload_mediaFile").get(0);+
var+files+++++++++=++fileUpload.files;+
var+mediafilename+=+"";+

for+(var+i+=+0;+i+<+files.length;+i%2B%2B)+{+
++mediafilename+=+files[i].name;+
}+|code-block|syntax|javascript|649178|entityMap^0|1R|Q|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Get the first file from the control and then get the name of the file, it will ignore the file path on Chrome, and also will make correction of path for IE browsers. On saving the file, you have to use <code>System.io.Path.GetFileName</code> method to get the file name only for IE browsers



<pre><code>var fileUpload = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files = fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i &lt; files.length; i++) { 
 mediafilename = files[i].name; 
} 
</code></pre>

blocks|key|866638|text|<script+type="text/javascript">

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

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

++++++++$('#filename').html(filename);
++++});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|866639|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script type="text/javascript"&gt;

 $('#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);
 });
&lt;/script&gt;
</code></pre>

blocks|key|649381|text|在这里你可以像这样调用这是我的输入文件控件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|649382|++<input+type="file"+title="search+image"+id="file"+name="file"+onchange="show(this)"++/>|code-block|syntax|javascript|649383|下面是我的Jquery，一旦你选择了这个文件就会调用它|649384|<script+type="text/javascript">
++++function+show(input)+{
++++++++var+fileName+=+input.files[0].name;
++++++++alert('The+file+"'+%2B+fileName+%2B+'"+has+been+selected.');+++++++++++++++
++++++++++++}

</script>|649385|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here you can call like this
Let this is my Input File control

<pre><code> &lt;input type="file" title="search image" id="file" name="file" onchange="show(this)" /&gt;
</code></pre>

Now here is my Jquery which get called once you select the file

<pre><code>&lt;script type="text/javascript"&gt;
 function show(input) {
 var fileName = input.files[0].name;
 alert('The file "' + fileName + '" has been selected.'); 
 }

&lt;/script&gt;
</code></pre>

blocks|key|866680|text|这种选择似乎是最合适的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|866681|$('input[type="file"]').change(function(e){
++++++++var+fileName+=+e.target.files[0].name;
++++++++alert('The+file+"'+%2B+fileName+%2B++'"+has+been+selected.');
});|code-block|syntax|javascript|866682|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This alternative seems the most appropriate.

<pre><code>$('input[type="file"]').change(function(e){
 var fileName = e.target.files[0].name;
 alert('The file "' + fileName + '" has been selected.');
});
</code></pre>

blocks|key|649269|text|var+filename=location.href.substr(location.href.lastIndexOf("/")%2B1);
alert(filename);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|649270|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

blocks|key|866782|text|我们也可以使用match删除它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|866783|var+fileName+=+$('input:file').val().match(/[%5E\\/]*$/)[0];
$('#file-name').val(fileName);|code-block|syntax|javascript|866784|entityMap^0|7|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

We can also remove it using <code>match</code>

<pre><code>var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);
</code></pre>

I used this:

<pre><code>$('input[type=file]').val()
</code></pre>

to get the file name selected, but it returned the full path, as in "C:\fakepath\filename.doc". The "fakepath" part was actually there - not sure if it's supposed to be, but this is my first time working with the filename of file uploads.

How can I just get the file name (filename.doc)?

Use jQuery to get the file input's selected filename without the path

我使用了这个：$('input[type=file]').val()以获取选定的文件名，但它返回完整路径，如"C:\fakepath\filename.doc“。"fakepath“部分实际上是存在的--不确定它是否应该存在，但这是我第一次使用文件上传的文件名。如何才能获得文件名(filename.doc)？

问使用jQuery获取文件输入的选定文件名，不带路径
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取文件输入的选定文件名，不带路径EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取文件输入的选定文件名，不带路径
EN