จะแก้ไข 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

ฉันใช้วัตถุ 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;
}

หากคุณไปที่ Internet Explorer, เครื่องมือ, ตัวเลือกอินเทอร์เน็ต, ความปลอดภัย, กำหนดเอง, ค้นหา "รวมเส้นทางไดเรกทอรีท้องถิ่นเมื่ออัปโหลดไฟล์ไปยังเซิร์ฟเวอร์" (มันค่อนข้างวิธีลง) และคลิกที่ "เปิดใช้งาน" สิ่งนี้จะได้ผล

ฉันมีความสุขที่เบราว์เซอร์ใส่ใจที่จะช่วยเราให้รอดพ้นจากสคริปต์ที่ล่วงละเมิดและไม่ชอบ ฉันไม่มีความสุขกับการใส่ IE ลงในเบราว์เซอร์ที่ทำให้การแก้ไขสไตล์แบบง่าย ๆ ดูเหมือนแฮ็คโจมตี!

ฉันใช้ <span> เพื่อแสดงไฟล์อินพุตเพื่อให้ฉันสามารถใช้สไตล์ที่เหมาะสมกับ <div> แทน <input> (อีกครั้งเนื่องจาก IE) ตอนนี้เนื่องจาก IE นี้ต้องการแสดงพา ธ ของผู้ใช้ที่มีค่าซึ่งรับประกันว่าจะทำให้พวกเขาระวังตัวและอยู่ในความวิตกกังวลน้อยที่สุด (ถ้าไม่ทำให้พวกเขากลัว!

อย่างไรก็ตามขอขอบคุณผู้ที่โพสต์คำอธิบายที่นี่: IE Browser Security: การต่อท้าย "fakepath" ไปยังเส้นทางของไฟล์ใน input [type = "file"]ฉันได้รวบรวมผู้ให้บริการรายย่อย ...

โค้ดด้านล่างทำสองสิ่ง - แก้ไขข้อผิดพลาด lte IE8 ที่เหตุการณ์ onChange ไม่เริ่มทำงานจนกว่า onBlur ของฟิลด์อัปโหลดและอัปเดตองค์ประกอบด้วย filepath ที่สะอาดซึ่งจะไม่ทำให้ผู้ใช้กลัว

// 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 นี้ได้รับการแก้ไขเช่นกัน

เหตุผลที่ฉันต้องการทำความรู้จักกับเส้นทางแบบเต็มคือการสร้างภาพตัวอย่างจาวาสคริปต์ก่อนที่จะอัปโหลด ตอนนี้ฉันต้องอัปโหลดไฟล์เพื่อสร้างภาพตัวอย่างของภาพที่เลือก

หากคุณต้องการส่งพา ธ แบบเต็มของไฟล์อัพเดลจริง ๆ คุณอาจต้องใช้แอปเพล็ต java ที่เซ็นชื่อแล้วเนื่องจากไม่มีวิธีรับข้อมูลนี้หากเบราว์เซอร์ไม่ส่ง

ดูเหมือนว่าคุณจะไม่พบเส้นทางแบบเต็มใน localhost ของคุณโดย js แต่คุณสามารถซ่อน 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 ดังนั้นฉันจึงต้องการอัปโหลดข้อมูลเหล่านั้นในคำขอ asynchronus ajax ใน [webMethod] คุณไม่สามารถจับตัวอัพโหลดไฟล์ได้เนื่องจากมันไม่ใช่องค์ประกอบที่คงที่ดังนั้นฉันต้อง ทำให้ผลประกอบการสำหรับการแก้ปัญหาดังกล่าวโดยการแก้ไขเส้นทางกว่าแปลงภาพที่ต้องการเป็นไบต์เพื่อบันทึกไว้ใน DB

นี่คือฟังก์ชั่นจาวาสคริปต์ของฉันหวังว่าจะช่วยให้คุณ:

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

สำหรับเส้นทางเต็ม