时间戳

首页 > 解决方案 > 如何在 rails5.1.6 中使用 AJAX 上传图片

javascript - 如何在 rails5.1.6 中使用 AJAX 上传图片

问题描述

我正在使用 Rails 5.1.6 开发小型网站，上传图片时遇到了一些麻烦。我需要使用 AJAX 上传，我通过搜索谷歌找到了一些答案，但我还没有成功。我正在使用 Rails 5.1.6 并使用包含 file_field 的 rails 表单标签。我想使用 AJAX 上传从文件浏览器中选择的图像。

标签： javascriptjqueryruby-on-rails

解决方案

//f.file_field in html.erb will be compiled to <input type='file'>
//you can construct FormData manually, param by param:
var fileInput = document.querySelector('form input[type=file]');
var attachment = fileInput.files[0];
var formData = new FormData(); 
formData.append('email', 'Your Email');
formData.append('attachment', attachment, 'filename.jpg');

//In jQuery you would send it like this:

      $.ajax({
        url: "/profile/upload_image",
        type: "POST",
        beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
        data: "data=" + formData,
        success: function(data) {
          ...
        }
      });

我也遇到过这种问题。您可以使用 AJAX 将图像文件的信息发送到您的 rails API，然后您可以上传带有信息的图像。要通过 AJAX（例如从 ）上传文件，您需要将参数包装在 FormData 对象中。

推荐阅读