Могу ли я использовать любой HTML или JavaScript API для получения пути к файлу при вводе [type = file]?

Я хочу реализовать функцию загрузки изображений.

После загрузки я хочу получить локальный путь к файлу, чтобы создать миниатюру. Но как я могу получить путь к файлу? Есть ли другой способ создать эскиз?

Я пробовал плагин jQuery-File-Upload.

Ответы на вопрос(3)

Страница демонстрации загрузки файла jQuery демонстрирует концепцию получения имени файла для загрузки. По мере добавления файлов имя файла отображается в виде таблицы под элементами управления.

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

Вот пример, который показывает, как получить имя файла:

function (e, data) {
    $.each(data.files, function (index, file) {
        alert('Added file: ' + file.name);   // filename alerted
    });
    data.url = '/path/to/upload/handler.json';
    var jqXHR = data.submit()
        .success(function (result, textStatus, jqXHR) {/* ... */})
        .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
        .complete(function (result, textStatus, jqXHR) {/* ... */});
}

Согласно документации, у вас будет больше шансов на успех, если вы свяжете функцию обратного вызова, используя.bind Ключевое слово jQuery:

$('#fileupload')
   .bind('fileuploadadd', function(e, data) { ... } );

From the documentation on "add":

The data parameter allows to override plugin options as well as define ajax settings. data.files holds a list of files for the upload request: If the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the selection for XHR file uploads, with a data.files array length of one, as each file is uploaded individually. Else the add callback will be called once for each file selection.

Вот полный списокПараметры загрузки файла jQuery.

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

Image previews

The following browsers have support for image previews prior to uploading files:

Firefox 3.6+ Google Chrome Opera 11+

Поддержка браузера На странице больше подробностей о том, какие именно функции плагина поддерживаются и не поддерживаются в разных браузерах.

 hh5418810 апр. 2012 г., 09:01
Я проверил все параметры, но не могу найти опцию создания большого пальца, я думаю, что большой палец на демонстрационной странице также через какой-то другой плагин ... однако я уже нашелsolution

ете получить только имя файла, удаливfakepath от значения:input.value.split("/")[1].

Чтобы создать миниатюру, используйте уже загруженный файл, а не локальный.

Решение Вопроса

что Chrome поддерживает это, но не уверен, удаляется ли он из-за соображений безопасности. В любом случае вы можете попробовать поиграть с javascrip, чтобы установить собственную ширину и высоту некоторого div и использовать readAsDataURL загруженного файла.

 <script type="text/javascript">     

function uploadFile(input) {         

if (input.files && input.files[0]) {            

 var reader = new FileReader();              
 reader.onload = function (e) {                 
 $('#test').attr('src', e.target.result).width(100).height(100);             
 };               
 reader.readAsDataURL(input.files[0]);        
 }     
} 

</script> 

<input type='file' onchange="uploadFile(this);" />     <img id="test" src="#" alt="my image" /> 
 10 апр. 2012 г., 09:09
html5rocks.com/en/tutorials/file/dndfiles/..there метод получения миниатюр после получения дескриптора файла ... Попробуйте скрипт в редактировании
 10 апр. 2012 г., 08:54
Можете ли вы показать пример этого? Обычно в ответы на Stackoverflow включаются подробности и объективные конкретные факты. Например, почему бы не показать пример использования readAsDataURL для выполнения того, что вы предлагаете?

Ваш ответ на вопрос