ฉันจะสร้างลิงค์ไปยังไฟล์ในเครื่องบนหน้าเว็บที่รันในเครื่องได้อย่างไร


155

ฉันต้องการมีไฟล์ html ที่จัดการไฟล์บางไฟล์ที่กระจัดกระจายอยู่ทั่วฮาร์ดไดรฟ์ของฉัน ตัวอย่างเช่นฉันมีสองไฟล์ที่ฉันจะเชื่อมโยงไปยัง:

  • C:\Programs\sort.mw
  • C:\Videos\lecture.mp4

ปัญหาคือฉันต้องการให้ลิงก์ทำงานเป็นทางลัดไปยังไฟล์ ฉันได้ลองทำสิ่งต่อไปนี้แล้ว:

<a href="C:\Programs\sort.mw">Link 1</a>
<a href="C:\Videos\lecture.mp4">Link 2</a>

... แต่ลิงก์แรกไม่ทำอะไรเลยและลิงค์ที่สองจะเปิดไฟล์ใน Chrome ไม่ใช่ VLC

คำถามของฉันคือ:

  1. มีวิธีการปรับ HTML ของฉันเพื่อรักษาลิงค์เป็นทางลัดไปยังไฟล์หรือไม่

  2. หากไม่มีวิธีในการปรับ HTML มีวิธีอื่นที่จะลิงก์ไปยังไฟล์ที่กระจัดกระจายไปทั่วฮาร์ดไดรฟ์อย่างเรียบร้อยหรือไม่?

คอมพิวเตอร์ของฉันใช้ Windows 7 และเว็บเบราว์เซอร์ของฉันคือ Chrome

คำตอบ:


259

คุณต้องใช้file:///โปรโตคอล (ใช่นั่นคือสามสแลช) หากคุณต้องการเชื่อมโยงไปยังไฟล์ในเครื่อง

<a href="file:///C:\Programs\sort.mw">Link 1</a>
<a href="file:///C:\Videos\lecture.mp4">Link 2</a>

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

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

ทำไมมันถึงติดขัดโดยไม่ต้องfile:///?

ส่วนแรกของ URLคือโปรโตคอล โปรโตคอลเป็นตัวอักษรสองสามตัวจากนั้นเครื่องหมายโคลอนและเครื่องหมายสแลชสองตัว HTTP://และFTP://เป็นโปรโตคอลที่ถูกต้อง; C:/ไม่ใช่และฉันก็ค่อนข้างแน่ใจว่ามันไม่ได้มีลักษณะคล้ายกัน

C:/ยังไม่ใช่ที่อยู่เว็บที่ถูกต้อง เบราว์เซอร์อาจสันนิษฐานว่ามันควรจะhttp://c/มีพอร์ตว่างที่ระบุ แต่นั่นจะล้มเหลว

เบราว์เซอร์ของคุณอาจไม่ถือว่ามันอ้างถึงไฟล์ในเครื่อง มันมีเหตุผลเล็กน้อยที่จะตั้งสมมติฐานเช่นนั้นเนื่องจากไซต์สาธารณะมักจะไม่พยายามเชื่อมโยงไปยังไฟล์ในเครื่องของคนทั่วไป

ดังนั้นหากคุณต้องการเข้าถึงไฟล์ในเครื่อง: บอกให้ใช้โปรโตคอลไฟล์

ทำไมต้องสามสแลช?

เพราะมันเป็นส่วนหนึ่งของไฟล์รูปแบบ URI คุณมีตัวเลือกในการระบุโฮสต์หลังจากสองสแลชแรก หากคุณข้ามการระบุโฮสต์โฮสต์จะถือว่าคุณอ้างถึงไฟล์บนพีซีของคุณเอง วิธีนี้เป็นทางลัดสำหรับfile:///C:/etcfile://localhost/C:/etc

ไฟล์เหล่านี้จะยังคงเปิดอยู่ในเบราว์เซอร์ของคุณและเป็นสิ่งที่ดี

เบราว์เซอร์ของคุณจะตอบกลับไฟล์เหล่านี้ในลักษณะเดียวกับที่พวกเขาตอบกลับไฟล์เดียวกันทุกที่บนอินเทอร์เน็ต ไฟล์เหล่านี้จะไม่เปิดในตัวจัดการไฟล์เริ่มต้นของคุณ (เช่น MS Word หรือ VLC Media Player) และคุณจะไม่สามารถทำอะไรเช่นขอให้ File Explorer เปิดตำแหน่งของไฟล์

นี่เป็นสิ่งที่ดีอย่างยิ่งสำหรับความปลอดภัยของคุณ

ไซต์ในเบราว์เซอร์ของคุณไม่สามารถโต้ตอบกับระบบปฏิบัติการของคุณได้เป็นอย่างดี หากเว็บไซต์ที่ดีสามารถบอกได้ว่าเครื่องของคุณจะเปิดlecture.mp4ในVLC.exeเว็บไซต์ที่เป็นอันตรายอาจบอกให้เปิดvirus.batในCMD.exe หรืออาจบอกให้เครื่องของคุณเรียกใช้ไฟล์Uninstall.exeสองสามไฟล์หรือเปิด File Explorer เป็นล้านครั้ง

สิ่งนี้อาจไม่สะดวกสำหรับคุณ แต่ความปลอดภัยของ HTML และเบราว์เซอร์ไม่ได้ออกแบบมาสำหรับสิ่งที่คุณทำ หากคุณต้องการเปิดlecture.mp4ในVLC.exe ให้ลองเขียนแอปพลิเคชันเดสก์ท็อปแทน


1
ขอบคุณโจนาธาน คุณรู้หรือไม่ว่ามีวิธี "แสดงไฟล์ในโฟลเดอร์" เป็นทางเลือกหรือไม่?
Brian Fitzpatrick

7
@Brian เบราว์เซอร์ของคุณไม่สามารถโต้ตอบกับระบบปฏิบัติการของคุณในแบบนั้นและคุณควรจะดีใจอย่างยิ่งที่มันไม่สามารถทำได้
doppelgreener

23
ดูเหมือนว่า Chrome จะไม่ดาวน์โหลดไฟล์ในเครื่องโดยใช้ไฟล์: /// โพรโทคอลอยู่ดี (ให้Not allowed to load local resourceข้อผิดพลาดแก่คุณ)
Loupax

1
ฉันต้องการให้ลิงค์เช่นนี้ "file: /// .. \ .. \ sort.mw" เพื่อให้มันกลับไปสองโฟลเดอร์และรับไฟล์ที่นั่น เพราะเราใช้ไฟล์คำในดรอปบ็อกซ์ ดังนั้นจึงมีทางออกใด ๆ
Murtaza Munshi

5
นอกจากนี้ยังอาจคุ้มค่าที่จะกล่าวถึงว่าคุณไม่สามารถลิงก์จากเว็บไซต์ (เช่นเซิร์ฟเวอร์ dev ท้องถิ่น) ไปยังไฟล์ในเครื่อง forums.mozillazine.org/viewtopic.php?f=9&t=1730
nuala

14

หากคุณใช้งาน IIS บนพีซีของคุณคุณสามารถเพิ่มไดเรกทอรีที่คุณพยายามเข้าถึงเป็นไดเรกทอรีเสมือนได้ ในการทำเช่นนี้คุณคลิกขวาที่ไซต์ของคุณใน ISS และกด "เพิ่มไดเรกทอรีเสมือน" ตั้งชื่อโฟลเดอร์เสมือน ชี้โฟลเดอร์เสมือนไปยังตำแหน่งโฟลเดอร์ของคุณบนพีซีของคุณ คุณต้องระบุข้อมูลรับรองที่มีสิทธิ์ในการเข้าถึงโฟลเดอร์เฉพาะเช่น HOSTNAME \ ชื่อผู้ใช้และรหัสผ่าน หลังจากนั้นคุณสามารถเข้าถึงไฟล์ในโฟลเดอร์เสมือนเป็นไฟล์อื่น ๆ บนเว็บไซต์ของคุณ

http://sitename.com/virtual_folder_name/filename.fileextension

อย่างไรก็ตามวิธีนี้ใช้ได้กับ Chrome ที่ไม่ยอมรับไฟล์โปรโตคอลไฟล์: //

หวังว่าจะช่วยให้ใครบางคน :)


ขอบคุณสำหรับคำตอบ! ฉันใส่ไฟล์: /// ไว้หน้าพา ธ ไปยังไฟล์อย่างไรก็ตามเมื่อฉันคลิกมันจะไม่ทำให้เกิดปัญหา ฉันต้องเปิดด้วย Ctrl (ในแท็บใหม่) ทำไมถึงเป็นเช่นนั้น?
Piotr Czyż

5

Janky ที่ดีที่สุด

<a href="file://///server/folders/x/x/filename.ext">right click </a></td>

จากนั้นคลิกขวาเลือกตัวเลือก "คัดลอกที่ตั้ง" แล้ววางลงใน url


เราถูกบังคับให้คลิกขวาหรือไม่ มีวิธีใดในการคลิกซ้ายที่มัน?
Bandoleras

1

กลับไปที่ 2017:

ใช้URL.createObjectURL (ไฟล์)เพื่อสร้างลิงค์ท้องถิ่นไปยังระบบไฟล์ที่ผู้ใช้เลือก

อย่าลืมเพิ่มหน่วยความจำโดยใช้URL.revokeObjectURL ()


อาร์กิวเมนต์ไฟล์ที่นี่ต้องการวัตถุไฟล์จริงที่สร้างขึ้นภายในรันไทม์ JS ของไคลเอ็นต์เบราว์เซอร์ซึ่งหมายความว่าเราจะต้องอัปโหลดไปยังเบราว์เซอร์ไคลเอ็นต์แล้ว (ผ่านตัวอย่างเช่นการควบคุมแบบฟอร์มอัปโหลดไฟล์) URL ที่สร้างขึ้นเป็น blob URL สำหรับดาวน์โหลดหรืออ้างอิงสำเนาที่เก็บไว้ในหน่วยความจำภายในรันไทม์ JS ของไคลเอ็นต์เบราว์เซอร์ นั่นจะไม่ช่วยในการสร้างลิงค์ไปยังไฟล์ในเครื่อง มันเป็นลิงค์ไปยังสำเนาที่เก็บไว้ในหน่วยความจำ
doppelgreener

สิ่งที่ฉันต้องการ ใช้ File Input เพื่อเลือกไฟล์จากนั้นเปิดในแท็บโดยใช้ createObjectURL
Tony Lugg

0

ฉันมีวิธีและทำงานเช่นนี้:

<'a href="FOLDER_PATH" target="_explorer.exe">Link Text<'/a>

แต่นั่นไม่ได้มีลักษณะเหมือนค่าเป้าหมายที่ถูกต้องแม้ใน Internet Explorer
doppelgreener

IE จะละเว้นเป้าหมาย (ไม่ถูกต้อง) (ด้านบน) การติดตามใช้งานได้ดีกับ IE10, 11: <a href="C:/tmp"> ลิงก์ไปยัง tmp บนไดรฟ์ C </a>
Primehunter

มันใช้งานได้ดีสำหรับฉันโดยใช้ IE และเส้นทางไดรฟ์เครือข่ายเช่น 'file: // servername / path \ to \ folder' แทน FOLDER_PATH หากคุณไม่ใช้ 'target = "_ explorer.exe" "โฟลเดอร์จะเปิดขึ้นใน IE แทนที่จะเป็น explorer.exe และดูเหมือนว่า explorer
JonP
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.