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

其他回答

一些浏览器具有安全特性,可以防止JavaScript知道文件的本地完整路径。这是有道理的——作为客户端,您不希望服务器知道您本地机器的文件系统。如果所有浏览器都这样做就太好了。

如果你真的需要发送上传文件的完整路径,那么你可能不得不使用一些类似于signed java applet的东西,因为如果浏览器不发送它,就没有任何方法获得这些信息。

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

        }
    }

我很高兴浏览器能把我们从侵入性脚本和类似的东西中拯救出来。我不喜欢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);