JS HTML 5 - Невозможно интегрировать пример кода - помощь - PullRequest
Новая
       8

JS HTML 5 - Невозможно интегрировать пример кода - помощь

1 голос
/ 04 июля 2011

Я нашел эти фрагменты кода 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

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

Ответы [ 3 ]

3 голосов
/ 04 июля 2011

Во-первых, у вашего примера есть пара непосредственных проблем: ваш закрытие <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. Является ли это ошибкой в ​​фрагменте, который вы тоже связали, или чем-то еще, я не уверен. Я пытаюсь выяснить.

Обновление

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

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

f.lastModifiedDate.toLocaleDateString(),

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

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

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

1 голос
/ 04 июля 2011

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

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

из кода в теге HEAD.Документ еще не загружен, поэтому объект 'files' не существует, поэтому строка кода в лучшем случае всегда будет неуспешной.

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

0 голосов
/ 04 июля 2011

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

<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, большое спасибо за действительно хороший пример кода

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...