Как загрузить изображение и показать его без обновления с помощью jQuery и Rails?

Question

Я хочу загрузить изображение, используя что-то вроде

<form ...>    
    <input type="file" id="upload"></input>
</form>

форма не имеет кнопки отправки, я делаю div для ее замены:

<div id="submit"></div>

Я надеюсь, что при нажатии на div изображение будет загружено, а затем показано в другом img без обновления.

Я знаю, что мне нужно использовать ajax, но я не знаю, как реализовать это с помощью jQuery и Rails.

Ниже приведены мои вопросы:

1. Как отправить загруженный файл на контроллер

   Я пытался использовать $ .post, но $ ("# upload"). Val () возвращает только путь к файлу, без содержимого.

2. Вот моя идея для достижения моей цели, это может работать?

   (1) привязать функцию к $ ("# submit"). Щелкнуть, отправить файл на контроллер

   (2) контроллер сохраняет файл в / public папке, рендерит файл url

   (3) определяют функцию как обратный вызов $ .post, в котором для src of some устанавливается значение url

   Если у моей идеи есть проблемы, пожалуйста, скажите мне правильный путь ...

   Спасибо !!

Answer 1

Лучшее решение - использовать плагин jQuery , который поможет вам решить вашу проблему.

Когда изображение загружено, просто верните JSON в качестве ответа с местоположением вашего изображения.

Затем с помощью jQuery или чистого JavaScript обновите атрибут «src» изображения.

JSON

{ url: "http://example.com/uploads/image-222.jpg" }

JS для выполнения при успешной загрузке

$('#id-of-your-image').attr(src, data.url); 

где данные - это JSON, возвращенный вам с сервера.