Как прочитать текст из диалогового окна «Открыть файл» и загрузить содержимое в текстовой области с помощью JavaScript (jquery)?

Question

Я хочу сделать кнопку «Открыть файл» для импорта содержимого текстовых файлов в текстовую область.

Как я могу прочитать содержимое файла, не загружая его на сервер?

Я хочу использовать javascript (с jquery lib) и хочу делать это без обновления страницы.

Answer 1

Я использовал HTML 5 File API. И локально это работает отлично.

+ 1 для Trusktr.

Ссылка: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (Нарезка файла.)

Answer 2

Это возможно с HTML5 File API .

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

Answer 3

Это действительно просто сделать с помощью vanila JS и HTML5. Сначала поместите где-нибудь HTML-теги для textarea и введите:

 <textarea id="textareaid" rows="4" cols="50"></textarea>
 <input type="file" id="files" name="files[]" /><output id="list"></output>

Затем добавьте приведенный ниже код в код JavaScript, если у вас есть textarea с другим идентификатором, вам нужно заменить 'textareaid' на id вашего textarea. После этого просто вызовите uploadAndLoad (); в вашем коде.

function handleFileSelecting(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {

                var content = e.target.result;
                if (content) {
                    // Inserting content into textarea, change id if you need
                    var textarea = document.getElementById('textareaid');
                    textarea.innerHTML = content;

                }
            };
        })(f);

        reader.readAsText(f);
    }
}

function uploadAndLoad() {
    var filesElem = document.getElementById('files');
    filesElem.addEventListener('change', handleFileSelecting, false);
    filesElem.click();
}

Answer 4

Как вы говорите, нет другого способа, кроме как взять текст в оба конца на сервер и обратно. Однако, чтобы немного облегчить боль, вы можете полностью автоматизировать это:

1. заключить вход для загрузки файла в собственный тег формы и дать идентификатору формы
2. добавить невидимый iframe на свою страницу, дать ему имя и использовать то же самое для идентификатора
3. используйте имя iframes в качестве атрибута target формы, содержащей файл для загрузки
4. привязать функцию к событию изменения загрузки файла, чтобы инициировать отправку формы. таким образом, как только вы выберете файл и диалоговое окно открытия файла закроется, начнется процесс загрузки

5. когда вы установите целевое значение для iframe, ответ от сервера будет доставлен туда, поэтому ваш php-скрипт отправит обратно что-то вроде следующего:

   echo "<script>window.top.window.file_ready('$file');</script>";

6. напишите js-функцию file_ready, которая принимает имя файла в качестве параметра и обновляет значение вашей текстовой области, совершая ajax-вызов на сервер.

Атрибуция обязательна. Я изучил эту технику из руководства по загрузке файлов AJAX .

Answer 5

Я думаю, что сделаю простую форму ajax, чтобы загрузить файл, а затем получить содержимое с помощью php, прежде чем удалить файл и распечатать его, не могу придумать другого решения.

Answer 6

Вы не можете.

Диалог открытия файла открывается браузером в ответ на отправку FORM с тегом INPUT с типом FILE . Файл должен быть сначала загружен на сервер.

Answer 7

Это невозможно с ванильным JavaScript, вам понадобится flash или какой-то другой подход, чтобы делать то, что вы хотите.

Причина в безопасности: чтобы вы не читали allMyPasswords.txt:)