jq ajax input file,如何在使用javascript，jquery-ajax更改<input type ='file'>时获取所选文件的完整路径？...

如何在使用javascript，jquery-ajax更改时获取所选文件的完整路径？

如何使用only name选择文件时获取文件的完整路径

function getFilePath(){

$('input[type=file]').change(function () {

var filePath=$('#fileUpload').val();

});

}

但filePath var包含所选文件的only name，而不是full path。

我在网上搜索过，但出于安全考虑，似乎浏览器(FF，chrome)只是给出文件名。

有没有其他方法来获取所选文件的完整路径？

9个解决方案

113 votes

出于安全原因，浏览器不允许这样做，即浏览器中的JavaScript无法访问文件系统，但是使用HTML5文件API，只有Firefox提供了mozFullPath属性，但如果您尝试获取该值，则返回空字符串：

$('input[type=file]').change(function () {

console.log(this.files[0].mozFullPath);

});

[http://jsfiddle.net/SCK5A/]

所以不要浪费你的时间。

编辑：如果您需要文件的路径来读取文件，则可以使用FileReader API。 以下是关于SO的相关问题：在上传图像之前预览图像。

undefined answered 2019-03-23T17:01:30Z

88 votes

试试这个：

它会给你一个临时路径而不是准确的路径，你可以使用这个脚本，如果你想在这个jsfiddle例子中显示选定的图像(通过selectng图像以及其他文件尝试)： -

的jsfiddle

这是代码： -

HTML： -

JS： -

$('#i_file').change( function(event) {

var tmppath = URL.createObjectURL(event.target.files[0]);

$("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

$("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> ["+tmppath+"]");

});

它不完全是你想要的，但它可以帮助你在某个地方。

DWX answered 2019-03-23T17:02:25Z

18 votes

你不能这样做 - 由于安全问题，浏览器不允许这样做。

使用input type = file对象选择文件时，该值   value属性的值取决于“Include local”的值   将文件上载到服务器时的目录路径“安全设置   用于显示包含输入的Web页面的安全区域   宾语。

仅返回所选文件的完全限定文件名   启用此设置时。 禁用该设置时，Internet   Explorer 8用字符串替换本地驱动器和目录路径   C：\ fakepath \以防止不恰当的信息泄露。

和别的

您在更改事件功能结束时错过了);。

也不要为change事件创建函数而只是使用它，如下所示，

$(function()

{

$('#fileUpload').on('change',function ()

{

var filePath = $(this).val();

console.log(filePath);

});

});

Dipesh Parmar answered 2019-03-23T17:03:27Z

12 votes

你不能。安全性使您无法了解客户端计算机的归档系统 - 它甚至可能没有！ 它可能是MAC，PC，平板电脑或支持互联网的冰箱 - 你不知道，不知道也不会知道。 让你拥有完整的路径可以为你提供有关客户端的一些信息 - 特别是如果它是一个网络驱动器。

实际上，您可以在特定条件下获取它，但它需要ActiveX控件，并且在99.99％的情况下不起作用。

你无法使用它将文件恢复到原始位置(因为你完全无法控制下载的存储位置，或者即使存储了它们)，所以在实践中它对你来说并没有多大用处。

Rajshekar Reddy answered 2019-03-23T17:04:10Z

10 votes

你的意思是？

$('#i_file').change( function(event) {

var tmppath = URL.createObjectURL(event.target.files[0]);

$("img").fadeIn("fast").attr('src',tmppath);

});

Aytac Gul answered 2019-03-23T17:04:43Z

5 votes

您可以使用以下代码获取上载文件的工作本地URL：

var path = (window.URL || window.webkitURL).createObjectURL(file);

console.log('path', path);

Steffen Brem answered 2019-03-23T17:05:09Z

1 votes

你永远不应该这样....我认为在最新的浏览器中尝试它是没用的(据我所知)..另一方面，所有最新的浏览器，将不允许这....

您可以通过其他一些链接找到一个解决方法，例如获取值服务器端，但不能在客户端(javascript)

使用jQuery从文件输入的完整路径

如何从Firefox 3中的HTML输入表单获取文件路径

bipen answered 2019-03-23T17:05:59Z

1 votes

如果您上传整个文件夹，则可以选择

更改事件将包含：

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

Blauhirn answered 2019-03-23T17:06:32Z

0 votes

文件元素和数组调用files它包含您需要的所有必要的东西

var file = document.getElementById("upload");

file.addEventListener("change", function() {

for (var i = 0; i < file.files.length; i++) {

console.log(file.files[i].name);

}

}, false);

Jeeva Kumar answered 2019-03-23T17:06:58Z