Я хотел бы реализовать загрузку нескольких изображений с помощью функции перетаскивания, но не могу найти в Интернете ничего, что могло бы помочь в моем конкретном случае.
Дело в том, что я хотел бы изменить размеры изображений при загрузке до соотношения 16: 9 и показывать эскизы по мере их загрузки. Также я использую метку, которую я написал css, чтобы стилизовать ее как красивую кнопку загрузки, и я запускаю скрытый ввод файла загрузки с этой меткой.
<label for="image">Upload image</label>
<input type="file" name="images[]" id="image">
Я решил, что мне нужно использовать jquery ajax при каждом нажатии кнопки «Загрузить изображение», чтобы отправлять изображения в скрипт загрузки, где я изменяю размеры изображений, загружаю их на сервер и возвращаю путь к изображениям в jquery. в качестве ответа, чтобы я мог показать миниатюру измененных изображений. То же самое касается функции перетаскивания, я слушаю «перетаскивание» и отправляю пропущенные изображения в скрипт загрузки.
Все до сих пор я могу работать без проблем, но дело в том, что я не хочу на самом деле загружать изображения на сервер, пока пользователь не нажмет кнопку для отправки формы, как только он закончит со всеми входами. Поэтому мой вопрос заключается в том, могу ли я манипулировать изображениями таким образом, и вместо того, чтобы загружать их на сервер, хранить их где-нибудь локально, пока не будет нажата эта кнопка окончательной отправки?
Я подумал о решении, в котором я загружаю изображения в папку «temp» на моем сервере с помощью ajax, а затем при отправке формы перемещаю их в папку «images», а затем настраиваю cron для очистки этой папки один раз в день, но я бы хотел чтобы избежать этого, потому что пользователь может начать заполнять форму, загружать некоторые изображения, а затем непосредственно перед тем, как щелкнуть форму, отправить шаги cron и удалить все изображения в папке «temp», и его изображения будут потеряны.
Я закончил тем, что создавал новый ввод файла через jquery при каждом выборе файла (при изменении ввода файла), удаляя id из всех предыдущих файловых вводов и устанавливая id = «image» для того нового, который я создаю, чтобы он все еще работал при нажатии на ярлык, который прикрепляется к нему.
Чтобы отобразить миниатюру предварительного просмотра, я использую FileReader и устанавливаю загруженное изображение в качестве фона для div миниатюр, который я настроил на адаптивный масштаб 16: 9 (padding-bottom: 56.25%). Фактическая обрезка изображения будет происходить на сервере после отправки формы.
Других решений пока нет …