<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;
}

其他回答

我也遇到了同样的问题。在IE8中,可以通过在文件输入控件后创建一个隐藏输入来解决这个问题。用它的前一个兄弟的值填充这个。在IE9中这个问题也被修复了。

我想要了解完整路径的原因是在上传之前创建一个javascript图像预览。现在我必须上传文件来创建所选图像的预览。

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

使用文件阅读器:

$(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 + ")" });

        }
    }

似乎你不能在你的localhost通过js找到完整的路径,但你可以隐藏fakepath只是显示文件名。使用jQuery获取文件输入的选择的文件名而不包含路径

您至少可以在您的机器上获得文件路径的临时创建副本。这里唯一的条件是输入元素应该在表单中 你必须做的其他事情是在表单中放入一个属性enctype,例如:

<form id="formid" enctype="multipart/form-data" method="post" action="{{url('/add_a_note' )}}">...</form>

你可以在底部找到路径字符串。 它打开流文件,然后删除它。