Как получить путь к файлу из формы ввода HTML в Firefox 3

У нас есть простая HTML-форма с <input type = "file">, как показано ниже:

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

В IE7 (и, вероятно, во всех известных браузерах, включая старый Firefox 2), если мы отправим файл типа «// server1 / path / to / file / filename», он будет работать правильно и даст полный путь к файл и имя файла.

В Firefox 3 он возвращает только «имя файла» из-за их новой «функции безопасности» для усечения пути, как описано в системе отслеживания ошибок Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=143220).

Я понятия не имею, как преодолеть эту «новую функцию», потому что она приводит к тому, что все формы загрузки в моем веб-приложении перестают работать в Firefox 3.

Может ли кто-нибудь помочь найти единое решение для получения пути к файлу как в Firefox 3, так и в IE7?

Теоретически вам понадобится полный путь к файлу, так как после его отправки вверх по течению вы сохраните его в своей собственной структуре папок.

user291471 11.03.2010 15:43

Думаю, пора принять ответ BalusC ...

Mr_and_Mrs_D 02.11.2013 18:10
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
52
2
212 429
8

Ответы 8

Просто с FF3 этого не сделать.

Другой вариант - использовать апплет или другие элементы управления для выбора и загрузки файлов.

Взгляните на XPCOM, там может быть что-то, что вы можете использовать, если Firefox 3 используется клиентом.

Это пример, который может сработать для вас, если вам нужен не совсем путь, а ссылка на файл, работающий в автономном режиме.

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

Он на французском, но код - javascript :)

Это ссылки, на которые указывает статья: http://developer.mozilla.org/en/nsIDOMFilehttp://developer.mozilla.org/en/nsIDOMFileList

Собственно, незадолго до выхода FF3 я провел несколько экспериментов, и FF2 отправляет только имя файла, как и Opera 9.0. Только IE отправляет полный путь. Такое поведение имеет смысл, поскольку серверу не нужно знать, где пользователь хранит файл на своем компьютере, это не имеет отношения к процессу загрузки. Если вы не пишете приложение для интрасети и не получаете файл прямым доступом к сети!

Что изменилось (и это настоящая суть элемента ошибки, на который вы указываете), так это то, что FF3 больше не разрешает доступ к пути к файлу из JavaScript. И я не позволю ввести / вставить туда путь, что меня больше раздражает: у меня есть расширение оболочки, которое копирует путь к файлу из проводника Windows в буфер обмена, и я много использовал его в такой форме. Я решил проблему с помощью расширения DragDropUpload. Но, боюсь, это станет не по теме.

Интересно, что делают ваши веб-формы, чтобы перестать работать с этим новым поведением.

[РЕДАКТИРОВАТЬ] После прочтения страницы, на которую ссылается Майк, я действительно вижу использование пути в интрасети (например, идентификацию пользователя) и локальное использование (предварительный просмотр изображения, локальное управление файлами). User Jam-es, похоже, предоставляет обходной путь с помощью nsIDOMFile (еще не пробовал).

Это альтернативное решение / исправление ... В FF3 вы можете получить полный путь к файлу в текстовом поле вместо поля просмотра файла. И это тоже ... Путем перетаскивания файла!

Вы можете перетащить свой файл в текстовое поле на своей html-странице. и он отобразит полный путь к файлу. Эти данные можно легко передать на ваш сервер или манипулировать ими.

Все, что вам нужно сделать, это использовать расширение DragDropUpload.

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

Это расширение поможет вам перетащить файлы в поле просмотра файлов (входной файл). Но вы все равно не сможете получить полный путь к файлу, если попытаетесь его восстановить.

Итак, я немного подправил это расширение. Таким образом, я могу перетащить файл в любое поле «ввода текста» и получить полный путь к файлу. Таким образом, я могу получить полный путь к файлу в FF3 Firefox 3.

Может быть, есть еще одна ссылка на DragDropUpload? Представленная ссылка не работает.

Richard Hedges 20.01.2012 02:33

Один чрезвычайно уродливый способ решить эту проблему - попросить пользователя вручную ввести каталог в текстовое поле и добавить его обратно в начало значения файла в JavaScript.

Беспорядочно ... но это зависит от уровня пользователя, с которым вы работаете, и решает проблему безопасности.

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

Для предварительного просмотра в Firefox работает это - вложение является объектом элемента вложения в первом примере:

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

Мы не можем получить полный путь к файлу в FF3. Приведенное ниже может быть полезно для настройки файлового компонента.

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

Другие вопросы по теме