<input type="file" id="file-id" name="file_name" onchange="theimage();">
这是我的上传按钮。
<input type="text" name="file_path" id="file-path">
这是一个文本字段,我必须在其中显示文件的完整路径。
function theimage(){
var filename = document.getElementById('file-id').value;
document.getElementById('file-path').value = filename;
alert(filename);
}
这是解决我的问题的JavaScript。但在警报值给我
C:\fakepath\test.csv
Mozilla给了我:
test.csv
但我想要本地完全限定文件路径。如何解决这个问题?
如果这是由于浏览器安全问题,那么应该采取什么替代方法来做到这一点?
我很高兴浏览器能把我们从侵入性脚本和类似的东西中拯救出来。我不喜欢IE把一些东西放进浏览器,使一个简单的风格修复看起来像黑客攻击!
我使用了< span >来表示文件输入,这样我就可以对< div >而不是< input >应用适当的样式(同样,因为IE)。现在,由于这个IE想要向用户显示一个具有值的路径,这只是保证让他们保持警惕和在最不担心(如果没有完全吓退他们?!)…更多的IE-CRAP !
无论如何,感谢那些在这里发布解释的人:IE浏览器安全:在输入[type="file"]中添加"fakepath"到文件路径,我已经把一个小的修复器放在一起…
下面的代码做了两件事——它修复了lte IE8的一个错误,即onChange事件直到上传字段的onBlur才会触发;它更新了一个元素,用一个干净的文件路径,不会吓到用户。
// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
// document onReady wrapper
$().ready(function(){
// check for the nefarious IE
if($.browser.msie) {
// capture the file input fields
var fileInput = $('input[type="file"]');
// add presentational <span> tags "underneath" all file input fields for styling
fileInput.after(
$(document.createElement('span')).addClass('file-underlay')
);
// bind onClick to get the file-path and update the style <div>
fileInput.click(function(){
// need to capture $(this) because setTimeout() is on the
// Window keyword 'this' changes context in it
var fileContext = $(this);
// capture the timer as well as set setTimeout()
// we use setTimeout() because IE pauses timers when a file dialog opens
// in this manner we give ourselves a "pseudo-onChange" handler
var ieBugTimeout = setTimeout(function(){
// set vars
var filePath = fileContext.val(),
fileUnderlay = fileContext.siblings('.file-underlay');
// check for IE's lovely security speil
if(filePath.match(/fakepath/)) {
// update the file-path text using case-insensitive regex
filePath = filePath.replace(/C:\\fakepath\\/i, '');
}
// update the text in the file-underlay <span>
fileUnderlay.text(filePath);
// clear the timer var
clearTimeout(ieBugTimeout);
}, 10);
});
}
});
})(jQuery);
Hy那里,在我的情况下,我使用asp.net开发环境,所以我想在异步ajax请求上传这些数据,在[webMethod]你不能捕捉文件上传器,因为它不是静态元素,
所以我不得不通过固定路径来解决这个问题,而不是将想要的图像转换为字节以保存在DB中。
这是我的javascript函数,
希望对你有所帮助:
function FixPath(Path)
{
var HiddenPath = Path.toString();
alert(HiddenPath.indexOf("FakePath"));
if (HiddenPath.indexOf("FakePath") > 1)
{
var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
MainStringLength = HiddenPath.length - UnwantedLength;
var thisArray =[];
var i = 0;
var FinalString= "";
while (i < MainStringLength)
{
thisArray[i] = HiddenPath[UnwantedLength + i + 1];
i++;
}
var j = 0;
while (j < MainStringLength-1)
{
if (thisArray[j] != ",")
{
FinalString += thisArray[j];
}
j++;
}
FinalString = "~" + FinalString;
alert(FinalString);
return FinalString;
}
else
{
return HiddenPath;
}
}
这里仅供测试:
$(document).ready(function () {
FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
});
// this will give you : ~/EnsaLmadiLiYghiz
在Chrome/Chromium的应用程序,如electron,你可以只使用target.files:
(我在这个例子中使用React JS)
const onChange = (event) => {
const value = event.target.value;
// this will return C:\fakepath\somefile.ext
console.log(value);
const files = event.target.files;
//this will return an ARRAY of File object
console.log(files);
}
return (
<input type="file" onChange={onChange} />
)
我上面所说的File对象看起来是这样的:
{
fullName: "C:\Users\myname\Downloads\somefile.ext"
lastModified: 1593086858659
lastModifiedDate: (the date)
name: "somefile.ext"
size: 10235546
type: ""
webkitRelativePath: ""
}
如果你想获取路径,你可以获取fullName。
注意,这只适用于chrome/chromium浏览器,所以如果你不需要支持其他浏览器(比如你正在构建一个电子项目),你可以使用这个。