วิธีรับเส้นทางแบบเต็มของไฟล์ที่เลือกเมื่อเปลี่ยน <input type = 'file'> โดยใช้ javascript, jquery-ajax?

วิธีรับพา ธ เต็มของไฟล์ขณะที่เลือกไฟล์โดยใช้ <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

แต่ var filePath มีของไฟล์ที่เลือกไม่ได้only name ฉันค้นหาในเน็ต แต่ดูเหมือนว่าด้วยเหตุผลด้านความปลอดภัยเบราว์เซอร์ (FF, chrome) เพียงแค่ให้ชื่อไฟล์ มีวิธีอื่นในการรับเส้นทางแบบเต็มของไฟล์ที่เลือกหรือไม่full path

เพื่อเหตุผลด้านความปลอดภัยเบราว์เซอร์ไม่อนุญาตสิ่งนี้เช่น JavaScript ในเบราว์เซอร์ไม่สามารถเข้าถึงระบบไฟล์ได้อย่างไรก็ตามการใช้ HTML5 File API มีเพียง Firefox เท่านั้นที่มีmozFullPathคุณสมบัติ แต่ถ้าคุณพยายามรับค่ามันจะส่งคืนสตริงว่าง:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

ดังนั้นอย่าเสียเวลา

แก้ไข: หากคุณต้องการเส้นทางของไฟล์สำหรับอ่านไฟล์คุณสามารถใช้FileReader API แทน นี่คือคำถามที่เกี่ยวข้องกับ SO: ดูตัวอย่างภาพก่อนที่จะอัพโหลด

ลองสิ่งนี้:

มันจะให้เส้นทางชั่วคราวไม่ใช่เส้นทางที่ถูกต้องคุณสามารถใช้สคริปต์นี้หากคุณต้องการแสดงภาพที่เลือกเช่นในตัวอย่าง jsfiddle นี้ (ลองโดยเลือกภาพและไฟล์อื่น ๆ ): -

JSFIDDLE

นี่คือรหัส: -

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS: -

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

มันไม่ใช่สิ่งที่คุณกำลังมองหา แต่มันอาจช่วยคุณได้

คุณไม่สามารถทำได้ - เบราว์เซอร์จะไม่อนุญาตสิ่งนี้เนื่องจากปัญหาด้านความปลอดภัย

เมื่อไฟล์ถูกเลือกโดยใช้วัตถุอินพุต type = ไฟล์ค่าของคุณสมบัติค่าขึ้นอยู่กับค่าของการตั้งค่าความปลอดภัย "รวมเส้นทางไดเรกทอรีท้องถิ่นเมื่ออัปโหลดไฟล์ไปยังเซิร์ฟเวอร์" สำหรับโซนความปลอดภัยที่ใช้ในการแสดงเว็บเพจ มีวัตถุอินพุต

ชื่อไฟล์ที่ผ่านการรับรองโดยสมบูรณ์ของไฟล์ที่เลือกจะถูกส่งคืนเมื่อเปิดใช้งานการตั้งค่านี้เท่านั้น เมื่อการตั้งค่าถูกปิดใช้งาน Internet Explorer 8 จะแทนที่ไดรฟ์ในระบบและเส้นทางไดเรกทอรีด้วยสตริง C: \ fakepath \ เพื่อป้องกันการเปิดเผยข้อมูลที่ไม่เหมาะสม

และอื่น ๆ

คุณพลาด);สิ่งนี้เมื่อสิ้นสุดฟังก์ชั่นกิจกรรมการเปลี่ยนแปลง

นอกจากนี้อย่าสร้างฟังก์ชั่นสำหรับเหตุการณ์การเปลี่ยนแปลงแทนเพียงแค่ใช้ดังต่อไปนี้

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

คุณทำไม่ได้ การรักษาความปลอดภัยหยุดคุณสำหรับการรู้อะไรเกี่ยวกับระบบการจัดเก็บข้อมูลของคอมพิวเตอร์ไคลเอนต์ - อาจไม่มีแม้แต่หนึ่ง! อาจเป็น MAC, PC, แท็บเล็ตหรือตู้เย็นที่เปิดใช้งานอินเทอร์เน็ต - คุณไม่รู้ไม่รู้และไม่รู้ และการให้คุณมีเส้นทางเต็มสามารถให้ข้อมูลบางอย่างเกี่ยวกับลูกค้าโดยเฉพาะอย่างยิ่งถ้าเป็นไดรฟ์เครือข่าย

ในความเป็นจริงคุณสามารถรับได้ภายใต้เงื่อนไขเฉพาะ แต่ต้องใช้ตัวควบคุม ActiveX และจะไม่ทำงานในสถานการณ์ 99.99%

คุณไม่สามารถใช้ไฟล์นี้เพื่อกู้คืนไฟล์ไปยังตำแหน่งเดิมได้ (เนื่องจากคุณไม่สามารถควบคุมตำแหน่งที่จัดเก็บการดาวน์โหลดหรือแม้ว่าจะถูกจัดเก็บไว้) ดังนั้นในทางปฏิบัติแล้วก็ไม่ได้มีประโยชน์อะไรมากมายสำหรับคุณ

คุณหมายถึงสิ่งนี้หรือไม่

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});

คุณสามารถใช้รหัสต่อไปนี้เพื่อรับ URL ในการทำงานสำหรับไฟล์ที่อัปโหลด:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>

สิ่งหนึ่งที่น่าสนใจ: แม้ว่าจะไม่สามารถใช้ได้บนเว็บหากคุณใช้ JS ใน Electron คุณก็สามารถทำได้

เมื่อใช้อินพุตไฟล์ HTML5 มาตรฐานคุณจะได้รับข้อมูลเพิ่มเติม pathคุณสมบัติสำหรับไฟล์ที่เลือกซึ่งมีเส้นทางไฟล์จริง

เอกสารฉบับเต็มได้ที่นี่: https://github.com/electron/electron/blob/master/docs/api/file-object.md

คุณสามารถทำได้หากการอัปโหลดทั้งโฟลเดอร์เป็นตัวเลือกสำหรับคุณ

<input type="file" webkitdirectory directory multiple/>

กิจกรรมการเปลี่ยนแปลงจะมี:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

คุณไม่ควรทำเช่นนั้น ... และฉันคิดว่าการลองใช้เบราว์เซอร์รุ่นล่าสุดนั้นไม่มีประโยชน์ (จากสิ่งที่ฉันรู้) ... เบราว์เซอร์ล่าสุดทั้งหมดในทางกลับกันจะไม่อนุญาตสิ่งนี้ ...

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

พา ธ แบบเต็มจากอินพุตไฟล์โดยใช้ jQuery
วิธีรับพา ธ ไฟล์จากแบบฟอร์มอินพุต HTML ใน Firefox 3

องค์ประกอบไฟล์มีและอาร์เรย์เรียกfilesว่ามันมีสิ่งที่จำเป็นทั้งหมดที่คุณต้องการ

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

คุณสามารถรับเส้นทางแบบเต็มของไฟล์ที่เลือกเพื่ออัปโหลดโดย IE11 และ MS Edge เท่านั้น

var fullPath = Request.Form.Files["myFile"].FileName;