<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);
其他回答
使用文件阅读器:
$(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 + ")" });
}
}
Use
document.getElementById("file-id").files[0].name;
而不是
document.getElementById('file-id').value
如果你真的需要发送上传文件的完整路径，那么你可能不得不使用一些类似于signed java applet的东西，因为如果浏览器不发送它，就没有任何方法获得这些信息。
我发现，最好的解决方案是使用像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
我希望这能有所帮助!
您至少可以在您的机器上获得文件路径的临时创建副本。这里唯一的条件是输入元素应该在表单中 你必须做的其他事情是在表单中放入一个属性enctype，例如:
<form id="formid" enctype="multipart/form-data" method="post" action="{{url('/add_a_note' )}}">...</form>
你可以在底部找到路径字符串。 它打开流文件，然后删除它。
