jQuery - загрузка файла - миниатюры

Question

У меня есть этот код:

http://jsfiddle.net/J6vzU/1/

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

Я знаю, как использовать timthumb и т. Д., Поэтому изменение размера не будет проблемой, но как показать загруженное изображение «на лету» с помощью jQuery?

Большое спасибо!

[редактировать]

Вот код:

<form method="post" action="">
    <input type="file" name="datafile" size="40">
    <div>
        <p>Live AJAX uploaded file thumbnail</p>
    </div>
    <input type="submit" value="Save this image">
</form>

Answer 1

Это возможно в браузерах, которые поддерживают File и FileReader ( caniuse.com )

Вот несколько примеров и руководств

Answer 2

Попробуйте это.

Шаг 1: добавьте следующую строку кода в ваш файл

<form id="myform">
    <input type='file' onchange="showImage(this);" /> 
    <img id="imagepreview" src="" alt="your image" /> 
</form>

Step2: добавить следующий скрипт на той же странице

<script type="text/javascript">
function showImage(input) { 
         if (input.files && input.files[0]) { 
         var reader = new FileReader(); 
         reader.onload = function (e) { 
                 $('#imagepreview').attr('src', e.target.result); 
         }
         reader.readAsDataURL(input.files[0]); 
      } 
  } 
</script>

Чек демо

Answer 3

[Править через 2,5 года: см. Комментарий Джошуа ниже этого ответа, это кажется возможным (сейчас), если вы готовы пожертвовать поддержкой старых (er) браузеров.]

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

Тем не менее, вы можете придумать решение, в котором ваше изображение загружается ajax-ish, сервер обрабатывает его и предоставляет информацию (т. Е. Url) для изображения (большого пальца) обратно в скрипт jQuery.

Но в этом случае «волшебство» происходит на сервере, а не в jQuery, и решение зависит от используемых вами серверных языков / техник.