<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
但我想要本地完全限定文件路径。如何解决这个问题?
如果这是由于浏览器安全问题，那么应该采取什么替代方法来做到这一点?
当前回答
我使用对象FileReader的输入onchange事件为您的输入文件类型!本例使用readAsDataURL函数，因此您应该有一个标记。FileReader对象还具有readAsBinaryString来获取二进制数据，稍后可以使用这些数据在服务器上创建相同的文件
例子:
var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
var img = document.getElementById("yourImgTag");
img.src = event.target.result;
}
其他回答
在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浏览器，所以如果你不需要支持其他浏览器(比如你正在构建一个电子项目)，你可以使用这个。
我也遇到了同样的问题。在IE8中，可以通过在文件输入控件后创建一个隐藏输入来解决这个问题。用它的前一个兄弟的值填充这个。在IE9中这个问题也被修复了。
我想要了解完整路径的原因是在上传之前创建一个javascript图像预览。现在我必须上传文件来创建所选图像的预览。
似乎你不能在你的localhost通过js找到完整的路径，但你可以隐藏fakepath只是显示文件名。使用jQuery获取文件输入的选择的文件名而不包含路径
我发现，最好的解决方案是使用像Multer这样的中间件。下面是一个简短的概述:
npm i multer Add enctype="multipart/form-data" to your html form. In your backend dock where you're making your post request, require multer (const multer = require('multer')) In the same dock, set your upload destination: const upload = multer({dest:'uploas/'}). This will automatically create a local folder called 'uploads' where your files will be added. The code I've included shows you how to upload to your local disk storage. If you're using cloud storage (e.g. AWS, Azure, Cloudinary etc.) you can check out the Multer docs to see how to manage that. There aren't too many extra steps though. in your post request, add 'upload.single' (for one file) or 'upload.array' (for multiple files), like this:
路由器。Post ('/new'， upload.single('image')， async function(req, res) {//'image'应该是你在req.body中发送的输入的名称 Console.log (req.file) //注意，如果你使用的是'upload. log '。数组'，这个应该是'req。files' })；
要求的事情。文件将有一个完整的路径名称，您可以在您的post请求中使用。欲了解更多信息，请查看Multer文档:
https://www.npmjs.com/package/multer
我希望这能有所帮助!
使用文件阅读器:
$(document).ready(function() {
$("#input-file").change(function() {
var length = this.files.length;
if (!length) {
return false;
}
useImage(this);
});
});
// Creating the function
function useImage(img) {
var file = img.files[0];
var imagefile = file.type;
var match = ["image/jpeg", "image/png", "image/jpg"];
if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
alert("Invalid File Extension");
} else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(img.files[0]);
}
function imageIsLoaded(e) {
$('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });
}
}
