Hướng dẫn script file path html

A file path describes the location of a file in a web site's folder structure.

File Path Examples

Path	Description
	The "picture.jpg" file is located in the same folder as the current page
	The "picture.jpg" file is located in the images folder in the current folder
	The "picture.jpg" file is located in the images folder at the root of the current web
	The "picture.jpg" file is located in the folder one level up from the current folder

HTML File Paths

A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files, like:

• Web pages
• Images
• Style sheets
• JavaScripts

Absolute File Paths

An absolute file path is the full URL to a file:

Example

Try it Yourself »

The

Vì lý do bảo mật, trình duyệt không cho phép điều này, tức là JavaScript trong trình duyệt không có quyền truy cập vào Hệ thống tệp, tuy nhiên sử dụng API tệp HTML5, chỉ Firefox cung cấp một thuộc mozFullPathtính, nhưng nếu bạn cố gắng lấy giá trị, nó sẽ trả về một chuỗi trống:

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

https://jsfiddle.net/SCK5A/

Vì vậy, đừng lãng phí thời gian của bạn.

chỉnh sửa: Nếu bạn cần đường dẫn của tệp để đọc tệp, bạn có thể sử dụng API FileReader để thay thế. Đây là một câu hỏi liên quan về SO: Xem trước một hình ảnh trước khi nó được tải lên.

184 hữu ích 5 bình luận chia sẻ

answer

109

Thử cái này:

Nó sẽ cung cấp cho bạn một đường dẫn tạm thời không phải là đường dẫn chính xác, bạn có thể sử dụng tập lệnh này nếu bạn muốn hiển thị các hình ảnh đã chọn như trong ví dụ jsfiddle này (Hãy thử bằng cách chọn hình ảnh cũng như các tệp khác): -

JSFIDDLE

Đây là mã: -

HTML: -

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

Nó không chính xác những gì bạn đang tìm kiếm, nhưng có thể nó có thể giúp bạn ở đâu đó.

109 hữu ích 5 bình luận chia sẻ

answer

19

Bạn không thể làm như vậy - trình duyệt sẽ không cho phép điều này vì lo ngại về bảo mật.

Khi một tệp được chọn bằng cách sử dụng đối tượng input type = file, giá trị của thuộc tính value phụ thuộc vào giá trị của cài đặt bảo mật "Bao gồm đường dẫn thư mục cục bộ khi tải tệp lên máy chủ" cho vùng bảo mật được sử dụng để hiển thị trang Web chứa đối tượng đầu vào.

Tên tệp đủ điều kiện của tệp đã chọn chỉ được trả lại khi cài đặt này được bật. Khi cài đặt bị tắt, Internet Explorer 8 sẽ thay thế ổ đĩa cục bộ và đường dẫn thư mục bằng chuỗi C: \ fakepath \ để ngăn tiết lộ thông tin không phù hợp.

Và khác

Bạn đã bỏ lỡ );điều này ở cuối chức năng sự kiện thay đổi.

Cũng không tạo hàm cho sự kiện thay đổi thay vào đó chỉ sử dụng nó như bên dưới,

19 hữu ích 3 bình luận chia sẻ

answer

18

Bạn không thể. Bảo mật ngăn bạn biết bất cứ điều gì về hệ thống lưu trữ của máy tính khách - nó thậm chí có thể không có! Đó có thể là MAC, PC, Tablet hoặc tủ lạnh có hỗ trợ Internet - bạn không biết, không thể biết và sẽ không biết. Và việc cho phép bạn có đường dẫn đầy đủ có thể cung cấp cho bạn một số thông tin về máy khách - đặc biệt nếu đó là ổ đĩa mạng chẳng hạn.

Trên thực tế, bạn có thể lấy nó trong các điều kiện cụ thể, nhưng nó yêu cầu điều khiển ActiveX và sẽ không hoạt động trong 99,99% trường hợp.

Bạn không thể sử dụng nó để khôi phục tệp về vị trí ban đầu (vì bạn hoàn toàn không có quyền kiểm soát nơi lưu trữ các tệp tải xuống hoặc ngay cả khi chúng được lưu trữ) nên trên thực tế, nó không có ích gì nhiều đối với bạn.

18 hữu ích 0 bình luận chia sẻ

answer

14

Ý bạn là điều này?

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

14 hữu ích 1 bình luận chia sẻ

answer

10

Bạn có thể sử dụng mã sau để lấy URL cục bộ đang hoạt động cho tệp đã tải lên:

10 hữu ích 0 bình luận chia sẻ

answer

8

Một lưu ý thú vị: mặc dù tính năng này không có sẵn trên web, nhưng nếu bạn đang sử dụng JS trong Electron thì bạn có thể làm điều này.

Sử dụng đầu vào tệp HTML5 tiêu chuẩn, bạn sẽ nhận được một thuộc tính bổ sung pathtrên các tệp đã chọn, chứa đường dẫn tệp thực.

Toàn bộ tài liệu tại đây: https://github.com/electron/electron/blob/master/docs/api/file-object.md

8 hữu ích 0 bình luận chia sẻ

answer

2

Bạn có thể, nếu tải lên toàn bộ thư mục là một tùy chọn cho bạn

sự kiện thay đổi sẽ bao gồm:

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

nhưng nó không chứa toàn bộ đường dẫn tuyệt đối, chỉ chứa đường dẫn tương đối. Cũng được hỗ trợ trong Firefox.

2 hữu ích 0 bình luận chia sẻ

answer

1

bạn không bao giờ nên làm như vậy ... và tôi nghĩ việc thử nó trong các trình duyệt mới nhất là vô ích (theo những gì tôi biết) ... mặt khác, tất cả các trình duyệt mới nhất sẽ không cho phép điều này ...

một số liên kết khác mà bạn có thể đi qua, để tìm cách giải quyết như lấy giá trị ở phía máy chủ, nhưng không phải ở phía máy khách (javascript)

Đường dẫn đầy đủ từ đầu vào tệp bằng jQuery
Cách lấy đường dẫn tệp từ biểu mẫu nhập HTML trong Firefox 3

1 hữu ích 0 bình luận chia sẻ

answer

0

phần tử tệp có và mảng gọi filesnó chứa tất cả những thứ cần thiết bạn cần

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

0 hữu ích 1 bình luận chia sẻ

answer

0

Người ta có thể sử dụng API FileReader để thay đổi src của một phần tử img.

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

0 hữu ích 0 bình luận chia sẻ

answer

-3

Bạn chỉ có thể tải lên đường dẫn đầy đủ của tệp đã chọn bằng IE11 và MS Edge.

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

-3 hữu ích 0 bình luận chia sẻ