首页 文章

提交后Rails Cloudinary Direct Image上传

提问于
浏览
1

我有一个关于从Cloudinary直接上传图片的问题 . 我可以使用简单形式和<%= f.cl_image_upload(:file)%>在rails应用程序中设置它,但在我选择文件后,它开始上传 . 我不喜欢这种方法,我希望在提交表单后立即启动上传 . 可能吗?我担心在我的数据库中没有相应ID的Cloudinary服务器中有文件 .

2 回答

  • 1

    默认实现确实会在选择后自动上传文件 . 大多数用户不需要额外的存储空间 . 但是,如果您不希望在选择时自动上传图像,可以在 fileupload 调用中将 autoUpload 设置为 false . 例如:

    $(document).ready(function() {
      $('.cloudinary-fileupload').fileupload({
        autoUpload: false
      });
    });
    
  • 0

    我想你可以帮助我,实际上,我有这个脚本......

    <script>
      $(document).ready(function() {
        // Cloudinary jQuery integration library uses jQuery File Upload widget
        // (see http://blueimp.github.io/jQuery-File-Upload/).
        // Any file input field with cloudinary-fileupload class is automatically
        // wrapped using the File Upload widget and configured for Cloudinary uploads.
        // You can further customize the configuration using .fileupload method
        // as we do below.
        $(".cloudinary-fileupload")
          .fileupload({ 
            // Uncomment the following lines to enable client side image resizing and valiation.
            // Make sure cloudinary/processing is included the js file       
            disableImageMetaDataLoad: true,        
            disableImageResize: false,
            imageMaxWidth: 800,
            imageMaxHeight: 800,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
            maxFileSize: 20000000, // 20MB
            dropZone: "#direct_upload",
            start: function (e) {
              $(".status").text("Starting upload...");
            },
            progress: function (e, data) {
              $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
            },
            fail: function (e, data) {
              $(".status").text("Upload failed");
            }
          })
          .off("cloudinarydone").on("cloudinarydone", function (e, data) {
            $(".status").text("");
            $(".preview").html(
              $.cloudinary.image(data.result.public_id, {
                format: data.result.format, width: 150, height: 100, crop: "limit"
              })
            );
          });
        });  
    </script>
    

    我开始使用javascript . 上面的这个脚本工作正常,但它只是在上传后显示预览 . 我不喜欢这种方法,因为如果用户更改预览图像,我将有一个文件上传到Cloudinary而不在我的数据库中进行相对注册 . 如果可以显示预览并且只是在用户按下表单中的提交后上传,那将会很棒 .

    注意:我希望你理解我,我来自巴西,我不会用英语写得很好 .

相关问题