C：\ fakepathを解決するには？

<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

しかし、ローカルの完全修飾ファイルパスが必要です。この問題を解決するには？

これがブラウザのセキュリティ問題が原因である場合、これを行う別の方法は何ですか？

一部のブラウザには、JavaScriptがファイルのローカルフルパスを認識できないようにするセキュリティ機能があります。それは理にかなっています-クライアントとして、あなたはサーバーにあなたのローカルマシンのファイルシステムを知らせたくないでしょう。すべてのブラウザがこれを行うとよいでしょう。

使用する

document.getElementById("file-id").files[0].name; 

の代わりに

document.getElementById('file-id').value

onchange入力ファイルタイプの入力イベントでオブジェクトFileReaderを使用します！この例では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;
}

Internet Explorer、[ツール]、[インターネットオプション]、[セキュリティ]、[カスタム]に移動する場合は、[サーバーにファイルをアップロードするときにローカルディレクトリパスを含める]を見つけ（かなり下にあります）、[有効にする]をクリックします。これは動作します

ブラウザが煩わしいスクリプトなどから私たちを救ってくれることを嬉しく思います。IEがブラウザーに何かを入れて、単純なスタイル修正をハック攻撃のように見せることに不満があります！

<入力>の代わりに<分割>に適切なスタイルを適用できるように、ファイル入力を表すために<スパン>を使用しました（もう一度、IEのため）。さて、このIEが原因で、ユーザーに警戒を怠らず最低限の不安を払うことが保証されている値を持つパスを表示したいと考えています（完全に怖がらせない限り！）。詳細IE-CRAP！

とにかく、ここに説明を投稿した人々に感謝します： IEブラウザーのセキュリティ：input [type = "file"]のファイルパスに "fakepath"を追加して、マイナーなフィクサーアッパーをまとめました...

以下のコードは2つのことを実行します。これは、アップロードフィールドのonBlurまでonChangeイベントが発生せず、ユーザーを怖がらせないクリーンなファイルパスで要素を更新するという、IE8のバグを修正します。

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

私は同じ問題に遭遇しました。IE8では、ファイル入力コントロールの後に隠し入力を作成することで回避できます。これを前の兄弟の値で埋めます。IE9では、これも修正されています。

フルパスを知りたい理由は、アップロードする前にJavaScript画像のプレビューを作成するためでした。次に、ファイルをアップロードして、選択した画像のプレビューを作成する必要があります。

アップロードされたファイルの完全なパスを送信する必要がある場合は、ブラウザーが送信しない場合にこの情報を取得する方法がないため、おそらく署名されたJavaアプレットのようなものを使用する必要があります。

あなたはjsであなたのlocalhostの完全なパスを見つけることができないようですが、ファイル名を表示するためにfakepathを隠すことができます 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 + ")" });

        }
    }

私の場合、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

Sardesh Sharmaの回答の使用を補足する：

document.getElementById("file-id").files[0].path

フルパス。