JS HTML 5 — Не удается интегрировать пример кода — справка

Я нашел эти фрагменты кода http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-input, и я хочу посмотреть, как они работают, но код не работает в моем случае. Может я что-то не так делаю с его интеграцией? Пожалуйста, поделитесь некоторыми фрагментами интеграции, потому что я действительно новичок в JS :)

вот моя, возможно, неправильная интеграция...

<html>

  <head>
<script language="javascript" type="text/javascript">

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}


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

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>

<body>
<div>
<input type="file" id="files" name="files[]" multiple />
  <output id="list"></output>
</div>
<body>


</html>

P.S> Мой интернет-браузер: FF 5.0

Все полезные комментарии приветствуются :)


javascript fileapi
person user592704    schedule 04.07.2011    source источник
comment
Что не работает в вашем случае? В чем заключается ваш случай? Как вы пытались интегрировать этот фрагмент в свое дело? Предположим, фрагмент, на который вы ссылаетесь, работает. Итак, нам нужно увидеть пример того, как вы пытались его использовать.   -  person tjm    schedule 04.07.2011
comment
Я вижу ввод файла и могу выбрать файл, но не вижу, что он добавлен ниже, как показано в примере :(   -  person user592704    schedule 04.07.2011

Ответы (3)


arrow_upward
3
arrow_downward

В вашем примере есть пара непосредственных проблем, во-первых, ваше закрытие <body> на самом деле является еще одним открытием <body>! Это не будет причиной вашей проблемы.

Вторая ошибка, это строка,

document.getElementById('files').addEventListener('change', handleFileSelect, false);

это не может быть, так сказать, открыто, потому что элемент с id=files не существует, пока окно не завершит загрузку, поэтому вам нужно обернуть это в функцию и вызвать ее при загрузке окна (или лучше в document.ready, если вы используете jQuery или аналогичный). Так,

window.onload = function() {
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};

К сожалению, после обоих из них я все еще получаю сообщение об ошибке, f.lastModifiedDate не определено. Подразумевается, что lastModifiedDate не является свойством объекта File. Является ли это ошибкой во фрагменте, который вы тоже связали, или что-то еще, я не уверен. Я пытаюсь выяснить.

Обновить

Ok. Ну, как вы сказали, вы хотели знать, является ли это проблемой с Firefox или нет, поэтому я пошел и проверил в Chrome, и он работал нормально. Я пришел к выводу, что атрибут lastModifiedDate объекта File не реализован в Firefox (5), но есть в Chrome. (Это можно подтвердить, перебирая доступные атрибуты объекта File).

Это не объясняет, почему попытка примера по ссылке, которую вы разместили, работает в Firefox, а копирование и вставка примера - нет. Единственная причина, по которой это может быть, заключается в том, что код во фрагменте не совсем совпадает с кодом, который фактически используется на странице. Должна быть какая-то проверка, действительно ли существует атрибут fileModifiedDate. Конечно же, взглянув на источник рассматриваемой страницы, вы увидите, что вместо этого

f.lastModifiedDate.toLocaleDateString(),

кажется, они используют это,

f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

Поэтому замена этой строки должна решить проблему. Вот работающий jsfiddle (по крайней мере, в Chrome и Firefox 5).

person tjm    schedule 04.07.2011
comment
Я заменил код на window.onload = function() { document.getElementById('files').addEventListener('change', handleFileSelect, false); }; Но это не работает :( - person user592704; 04.07.2011
comment
Пожалуйста, покажите свой фрагмент кода, потому что мне нужно знать, может быть, это все проблема FF 5.0 :( - person user592704; 04.07.2011
comment
Спасибо, но я все еще не понимаю, потому что в примере показаны JS и HTML по отдельности, поэтому я не уверен, где на самом деле размещается код JS, поскольку должен быть весь HTML-код? Должен ли он быть помещен в теги заголовка или где? Это меня смущает :( - person user592704; 04.07.2011
comment
@user JavaScript в jsfiddle работает так же, как если бы вы включили его как внешний файл. Если вы хотите, чтобы он был встроенным, просто скопируйте и вставьте его между тегами script в разделе head, как в исходном примере. Надеюсь это поможет. - person tjm; 04.07.2011
comment
Но почему IE не работает с File API? Какая версия IE поддерживает File API? - person user592704; 04.07.2011
comment
@user Этого я не знаю. Вероятно, это должен быть новый вопрос. Но прежде чем вы его зададите, здесь есть похожий вопрос: stackoverflow.com/questions/4349144/, это может помочь. - person tjm; 04.07.2011
comment
ОК :) Что касается даты изменения... Хм, значит, во фрагменте используется f.lastModifiedDate? f.lastModifiedDate.toLocaleDateString() : 'n/a', и это логическое выражение, верно? Если вы и я получаем n/a only, это означает, что он возвращает только false. Но почему? - person user592704; 04.07.2011
comment
Он возвращает false, когда f.lastModifiedDate не определено. Что, как мы видели, всегда есть в Firefox. Если вы не уверены в его использовании, снова задайте другой вопрос или, что еще лучше, выполните поиск тернарного оператора, так называется синтаксис ? ... : .... - person tjm; 04.07.2011

arrow_upward
1
arrow_downward

Прежде всего, вы не можете выполнить эту строку кода:

document.getElementById('files').addEventListener('change', handleFileSelect, false);

из кода в теге HEAD. Документ еще не загружен, поэтому объект «файлы» не существует, поэтому эта строка кода в лучшем случае всегда будет завершаться ошибкой.

Перед выполнением необходимо дождаться окончания загрузки документа. Если вы не используете какую-либо библиотеку (например, jQuery или YUI), вы можете подключиться к методу onload для страницы и запустить свой код из него.

person jfriend00    schedule 04.07.2011
comment
Я пытался заменить элементы, но это не помогло :( Поддерживает ли FF 5.0 File API? - person user592704; 04.07.2011

arrow_upward
0
arrow_downward

Итак, я изменил код как

<html>

    <head>

<script>

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', f.size,
          ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',  
          '</li>');
    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

window.onload = function() {

    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};
</script>

    </head>

    <body>
        <div>
            <input type="file" id="files" name="files[]" multiple />

            <output id="list"></output>
        </div>
    </body>
</html>

и это работало в моем FF 5.0 :)

@tjm, большое спасибо за действительно хороший пример кода

person user592704    schedule 04.07.2011