it-swarm-vi.tech

Cách nhận đường dẫn tệp từ biểu mẫu nhập HTML trong Firefox 3

Chúng tôi có dạng HTML đơn giản với <input type="file">, như được hiển thị bên dưới:

<form>
  <label for="attachment">Attachment:</label>
  <input type="file" name="attachment" id="attachment">
  <input type="submit">
</form>

Trong IE7 (và có lẽ là tất cả các trình duyệt nổi tiếng, bao gồm cả Firefox 2 cũ), nếu chúng tôi gửi một tệp như '// server1/path/to/file/filename' thì nó hoạt động chính xác và cung cấp đường dẫn đầy đủ đến tệp và tên tệp.

Trong Firefox 3, nó chỉ trả về 'tên tệp', vì 'tính năng bảo mật' mới của họ để cắt bớt đường dẫn, như được giải thích trong hệ thống theo dõi lỗi của Firefox ( https://bugzilla.mozilla.org/show_orms.cgi? id = 14322 )

Tôi không biết làm thế nào để vượt qua 'tính năng mới' này vì nó khiến tất cả các hình thức tải lên trong ứng dụng web của tôi ngừng hoạt động trên Firefox 3.

Bất cứ ai cũng có thể giúp tìm một giải pháp duy nhất để có được đường dẫn tệp cả trên Firefox 3 và IE7?

52
m_pGladiator

Trong IE7 (và có lẽ là tất cả các trình duyệt nổi tiếng, bao gồm cả Firefox 2 cũ), nếu chúng tôi gửi một tệp như '// server1/path/to/file/filename' thì nó hoạt động chính xác và cung cấp đường dẫn đầy đủ đến tệp và tên tệp.

Tôi không biết làm thế nào để vượt qua 'tính năng mới' này vì nó khiến tất cả các hình thức tải lên trong ứng dụng web của tôi ngừng hoạt động trên Firefox 3.

Có một sự hiểu lầm lớn ở đây. Tại sao bạn cần đường dẫn tệp đầy đủ ở phía máy chủ? Hãy tưởng tượng rằng tôi là khách hàng và tôi có một tệp tại _C:\path\to\passwords.txt_ và tôi cung cấp đường dẫn tệp đầy đủ cho bạn. Làm thế nào bạn có thể trở thành một máy chủ nhận được nội dung ? Bạn có kết nối TCP mở với hệ thống tệp đĩa cục bộ của tôi không? Bạn đã kiểm tra chức năng tải lên tệp khi bạn đưa ứng dụng web của mình vào sản xuất trên một máy chủ khác chưa?

Nó sẽ chỉ hoạt động khi cả máy khách và máy chủ chạy ở trên cùng một máy , bởi vì sau đó bạn sẽ có quyền truy cập vào cùng hệ thống tệp đĩa cứng. Điều này chỉ xảy ra khi bạn phát triển cục bộ trang web của mình và do đó cả webbrowser (máy khách) và máy chủ web (máy chủ) do sự trùng hợp chạy trên cùng một máy.

Đường dẫn tệp đầy đủ đang được gửi trong MSIE và các webbrowsers cổ khác là do lỗi bảo mật . Các thông số W3RFC2388 chưa bao giờ được đề cập để bao gồm đường dẫn tệp đầy đủ. Chỉ tên tập tin. Firefox đang thực hiện đúng công việc của mình.

Để xử lý các tệp được tải lên, bạn không cần phải biết đường dẫn tệp đầy đủ. Bạn nên quan tâm đến toàn bộ nội dung tệp mà máy khách đã gửi đến máy chủ trong phần thân yêu cầu trong trường hợp yêu cầu _multipart/form-data_. Thay đổi biểu mẫu của bạn để trông giống như sau như được nêu trong RFC2388:

_<form action="upload-script-url" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
_

Cách lấy nội dung của tệp đã tải lên ở phía máy chủ tùy thuộc vào ngôn ngữ lập trình phía máy chủ bạn đang sử dụng.

  • Java/JSP : bạn muốn sử dụng HttpServletRequest#getPart() hoặc API API tải lên tệp Commons của Apache để phân tích nó Bạn nên kết thúc với một InputStream với nội dung tệp mà lần lượt bạn có thể ghi vào bất kỳ OutputStream nào theo sở thích của bạn. Bạn có thể tìm thấy một ví dụ trong câu trả lời này .

  • Java/JSF : bạn muốn sử dụng <h:inputFile> thành phần hoặc bất kỳ thành phần tải lên tệp nào được cung cấp bởi thư viện thành phần bạn cung cấp Đang sử dụng. Cũng tại đây, bạn muốn có được nội dung tệp theo hương vị của InputStream. Xem câu trả lời này để biết ví dụ.

  • PHP: nội dung tệp đã được lưu hoàn toàn trên đĩa tạm thời. Bạn muốn sử dụng hàm move_uploaded_file() để di chuyển nó đến vị trí mong muốn. Xem thêm Hướng dẫn sử dụng PHP .

  • ASP.NET : không có câu trả lời chi tiết nào từ tôi vì tôi không làm điều đó, nhưng Google đã tìm thấy một số ví dụ cho tôi: ví dụ ASP.NET , ví dụ ASP.NET 2.0

Bất cứ khi nào bạn muốn lấy phần tên tệp của tệp đã tải lên, bạn nên cắt đường dẫn đầy đủ từ tên tệp. Thông tin này là hoàn toàn không liên quan đến bạn. Cũng xem ví dụ này Apache Commons FileUpload FAQ entry

Tại sao FileItem.getName () trả về toàn bộ đường dẫn mà không chỉ tên tệp?

Internet Explorer cung cấp toàn bộ đường dẫn đến tệp đã tải lên chứ không chỉ tên tệp cơ sở. Vì FileUpload cung cấp chính xác những gì được cung cấp bởi máy khách (trình duyệt), bạn có thể muốn xóa thông tin đường dẫn này trong ứng dụng của mình.

60
BalusC

Để xem trước trong Firefox hoạt động này - tệp đính kèm là đối tượng của phần tử đính kèm trong ví dụ đầu tiên:

           if (attachment.files)
             previewImage.src = attachment.files.item(0).getAsDataURL();
           else
             previewImage.src = attachment.value;
10
houba

Trên thực tế, ngay trước khi FF3 ra mắt, tôi đã thực hiện một số thử nghiệm và FF2 chỉ gửi tên tệp, giống như đã làm Opera 9.0. Chỉ IE gửi đường dẫn đầy đủ. Hành vi này có ý nghĩa, bởi vì máy chủ không cần phải biết người dùng lưu trữ tệp trên máy tính của mình ở đâu, điều đó không liên quan đến quá trình tải lên. Trừ khi bạn đang viết một ứng dụng mạng nội bộ và nhận tệp bằng cách truy cập mạng trực tiếp!

Điều đã thay đổi (và đó là điểm thực sự của mục lỗi mà bạn trỏ đến) là FF3 không còn cho phép truy cập vào đường dẫn tệp từ JavaScript. Và sẽ không cho phép gõ/dán một đường dẫn ở đó, điều này gây khó chịu hơn cho tôi: Tôi có một tiện ích mở rộng Shell sao chép đường dẫn của tệp từ Windows Explorer vào khay nhớ tạm và tôi đã sử dụng nó rất nhiều ở dạng như vậy. Tôi đã giải quyết vấn đề bằng cách sử dụng tiện ích mở rộng DragDropUpload. Nhưng điều này trở nên lạc đề, tôi sợ.

Tôi tự hỏi những gì các hình thức Web của bạn đang làm để ngừng hoạt động với hành vi mới này.

[EDIT] Sau khi đọc trang được liên kết bởi Mike, tôi thực sự thấy mạng nội bộ sử dụng đường dẫn (ví dụ xác định người dùng) và sử dụng cục bộ (hiển thị bản xem trước của hình ảnh, quản lý tệp cục bộ). Người dùng Jam-es dường như cung cấp một cách giải quyết với nsIDOMFile (chưa thử).

2
PhiLho

Chúng tôi không thể có đường dẫn tệp hoàn chỉnh trong FF3. Dưới đây có thể hữu ích cho việc tùy chỉnh thành phần Tệp.

<script>

function setFileName()
{
    var file1=document.forms[0].firstAttachmentFileName.value; 

    initFileUploads('firstFile1','fileinputs1',file1);
    }
function initFileUploads(fileName,fileinputs,fileValue) {
    var fakeFileUpload = document.createElement('div');
    fakeFileUpload.className = 'fakefile';
    var filename = document.createElement('input');
    filename.type='text';
    filename.value=fileValue;
    filename.id=fileName;
    filename.title='Title';
    fakeFileUpload.appendChild(filename);
    var image = document.createElement('input');
    image.type='button';
    image.value='Browse File';
    image.size=5100;
    image.style.border=0;
    fakeFileUpload.appendChild(image);
    var x = document.getElementsByTagName('input');
    for (var i=0; i&lt;x.length;i++) {
        if (x[i].type != 'file') continue;
        if (x[i].parentNode.className != fileinputs) continue;
        x[i].className = 'file hidden';
        var clone = fakeFileUpload.cloneNode(true);
        x[i].parentNode.appendChild(clone);
        x[i].relatedElement = clone.getElementsByTagName('input')[0];
        x[i].onchange= function () {
            this.relatedElement.value = this.value;
        }}
    if(document.forms[0].firstFile != null && document.getElementById('firstFile1') != null)
    {
    document.getElementById('firstFile1').value= document.forms[0].firstFile.value;
    document.forms[0].firstAttachmentFileName.title=document.forms[0].firstFile.value;
    }
}

function submitFile()
{
alert( document.forms[0].firstAttachmentFileName.value);
}
</script>
<style>div.fileinputs1 {position: relative;}div.fileinputs2 {position: relative;}
div.fakefile {position: absolute;top: 0px;left: 0px;z-index: 1;}
input.file {position: relative;text-align: right;-moz-opacity:0 ;filter:alpha(opacity: 0);
    opacity: 0;z-index: 2;}</style>

<html>
<body onLoad ="setFileName();">
<form>
<div class="fileinputs1">
<INPUT TYPE=file NAME="firstAttachmentFileName" styleClass="file" />
</div>
<INPUT type="button" value="submit" onclick="submitFile();" />
</form>
</body>
</html>
2
Jay

Đây là một giải pháp/sửa chữa thay thế ... Trong FF3, Bạn có thể truy xuất đường dẫn đầy đủ của tệp trong hộp văn bản thay vì hộp duyệt tệp. Và điều đó cũng ... Bằng cách kéo/thả tập tin!

Bạn có thể kéo thả tệp của bạn vào một hộp văn bản trong trang html của bạn. và nó sẽ hiển thị đường dẫn đầy đủ của tập tin. Dữ liệu này có thể được chuyển đến máy chủ của bạn một cách dễ dàng hoặc thao tác với chúng.

Tất cả bạn phải làm là sử dụng tiện ích mở rộng DragDropUpload

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

Tiện ích mở rộng này sẽ giúp bạn kéo thả tệp vào hộp Duyệt tệp (Tệp nhập). Nhưng bạn vẫn không thể có được đường dẫn đầy đủ của tập tin, Nếu bạn cố gắng truy xuất.

Vì vậy, tôi đã điều chỉnh phần mở rộng này một chút. Theo cách tôi có thể kéo thả tệp vào bất kỳ hộp "Nhập văn bản" nào và nhận đường dẫn đầy đủ của tệp. Và do đó tôi có thể có được đường dẫn đầy đủ của tệp trong FF3 Firefox 3.

0
Kumaresan

Đơn giản là bạn không thể làm điều đó với FF3.

Tùy chọn khác có thể là sử dụng applet hoặc các điều khiển khác để chọn và tải lên tệp.

0
roh

Một cách cực kỳ xấu để giải quyết vấn đề này là người dùng nhập thủ công thư mục vào hộp văn bản và thêm phần này vào phía trước giá trị tệp trong JavaScript.

Lộn xộn ... nhưng nó phụ thuộc vào mức độ người dùng mà bạn đang làm việc và giải quyết vấn đề bảo mật.

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;
0
dan

Hãy xem XPCOM , có thể có thứ gì đó bạn có thể sử dụng nếu Firefox 3 được khách hàng sử dụng.

0
LohanJ

Đây là một ví dụ có thể phù hợp với bạn nếu những gì bạn cần không chính xác là đường dẫn, mà là một tham chiếu đến tệp làm việc ngoại tuyến.

http://www.ab-d.fr/date/2008-07-12/

Nó là tiếng Pháp, nhưng mã là javascript :)

Đây là các tài liệu tham khảo mà bài viết hướng đến: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

0
Victor