Изображения с предварительным загрузчиком изображений, загруженные в Amazon S3?

Question

Поскольку Fine Uploader 4.0 имеет возможность создавать предварительные просмотры изображений полностью на стороне клиента (кроме IE 9.0 и ниже), можно ли использовать тот же метод для создания эскизов, которые также загружаются вместе с исходными файлами, в частности Amazon S3. Как вы знаете, Amazon S3 не требует обработки на стороне сервера, поэтому затрудняет создание эскизов медиафайлов, загружаемых непосредственно на Amazon S3, без создания эскизов раньше времени или с помощью отдельного сервера, не более чем для обработки изображений для создания эскизов ,

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

В дополнение к этим строкам мы также хотели бы создать простую HTML-страницу с файлами, которые были загружены на странице, а затем загрузить их одновременно с остальными файлами. Эта страница HTML будет предоставлена ​​пользователю в качестве страницы доставки, которая затем может быть передана получателю конечного адресата. Разумеется, мы могли бы иметь запись на стороне сервера в БД, файлы, которые должны быть загружены, и позволить серверу отображать страницу доставки. Но сначала я хотел бы попытаться создать пользовательскую клиентскую страницу с настраиваемой HTML-страницей и использовать ее вместо этого. Причина в том, что во-первых, мы хотели бы избежать чрезмерного стресса на нашем обычном сервере, а во-вторых, в случае, если файлы загружаются пользователем, которые заставляют контент помечать, я не хочу, чтобы наше доменное имя получало черный список потому что кажется, что мы обслуживаем нецензурный контент (однако мы полностью намерены контролировать любой файл, загруженный с помощью этой службы). Вместо этого, если все файлы доставляются через S3, хотя все они будут поступать из ведра, который мы контролируем, я предполагаю, что черный список конкретного ведра на S3 гораздо менее вероятен. Если у вас есть что добавить к этой идее/концерну/теории, я бы с удовольствием ее услышал.

Спасибо.

Answer 1

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

Обратите внимание, этот метод будет работать только в современных браузерах:

Вы можете преобразовать data-uri, присутствующие в атрибуте <img> тега, предварительный просмотр оказанный на к Blobsrc, а затем использовать FU's API method addBlobs(), чтобы добавить его в список загружаемых файлов.

У SO#4997908 похоже, есть код, который может преобразовывать данные-uri в blob. (Я протестировал решение Мауризо на этот ответ, и он работает правильно, хотя я его тестировал минимально)

Одно из предостережений с этой техникой заключается в том, что вы используете режим FU UI, а затем добавленная миниатюра будет отображаться в файл список, когда на него вызывается addBlobs, для этого будет создан другой предварительный просмотр, и ... хорошо, что может продолжаться ad infinitum.

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

_onSubmit: function(id, name) { 
    this._parent.prototype._onSubmit.apply(this, arguments); 
    this._addToList(id, name); 
} 

Чтобы обойти это предостережением в режиме пользовательского интерфейса можно создать еще один экземпляр Fine Uploader в режиме ядра, называют addBlobs на этом экземпляре, и в конечном счете называют uploadStoredFiles на этом экземпляре, а также. Это позволит вам загрузить изображение, его предварительный просмотр и не иметь дополнительный файл в списке файлов.