大佬教程收集整理的这篇文章主要介绍了jquery – 使用Rails 3.2和AJAX(非Flash上传解决方案)将多个文件直接上传到Amazon S3,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个rails 3.2应用程序,允许用户使用carrierwave_direct,fog和carrierwave(对carrierwave_direct的依赖)将文件上传到Amazon S3帐户.使用carrierwave_direct允许用户通过将文件直接发送到Amazon S3来跳过将文件上传到服务器(保存服务器处理和Heroku等大文件的超时).
如果您只是选择1个文件,将其上传到亚马逊,并希望重定向到您提供亚马逊的URL,它就可以正常工作.它通过将表单发布到Amazon S3来执行此操作,并且Amazon使用URL中的一些参数响应提供的URL(您在表单中指定此URL),然后将其存储为模型中Amazon上的文件的指针.
所以生命周期是:选择1个文件,POST到亚马逊,亚马逊用一个URL回复你的另一个页面,然后你可以保存一个带有指向亚马逊文件的指针的记录.
我一直想弄清楚的是如何选择和上传多个文件并更新上传进度?我正在尝试使用纯javascript(使用现代浏览器提供的文件API)这样做,所以我不想要任何第三方工具.另外,在深入学习这个问题的过程中,我正在避免使用任何插件,并且我正在尝试自己编写代码.
我想要获得的功能是:
>用户看到带有文件字段的表单(或拖放)
>用户选择多个文件(单击文件字段或拖放)
>使用Javascript(还没有服务器),构建一个要上传的选定文件的队列(只是文件名和大小,使用浏览器文件API)
>然后用户单击“开始上载”按钮
>迭代队列中的每个文件并将文件POST到Amazon S3;亚马逊将使用URL响应每个POST,并且该URL需要通过Javascript处理,而不是作为标准请求;亚马逊提供的URL将创建一个记录,用于存储指向Amazon文件的指针;创建记录后,代码将转到队列中的下一个文件,直到完成为止.
在这一点上,我甚至可以没有个人进度条;我很乐意在没有页面刷新的情况下将多个文件发布到Amazon S3.
我并不偏爱任何宝石.我实际上害怕如果我真的希望以特定方式完成它,我将不得不从头开始写我想做的事情.目标是通过AJAX将多个文件上传到Amazon S3帐户.即使是如何处理问题的一般概念,我也会欣喜若狂.我花了很多时间在谷歌搜索这个,我还没有找到任何可以做我想要的解决方案.任何帮助都将非常感激.
编辑2014-03-02
Raj询问我是如何实现多重上传的.这已经很久了,我不记得我所做的所有“为什么”(可能是糟糕的代码,因为这是我第一次),但这就是我的目标.
我上传的模型是推荐书,其中相关图像存储在Amazon S3中.它允许用户选择多个图像(我认为它们实际上是我转换为图像的PDF文件)并将它们拖放到屏幕上.在上传时,我显示了一个模式,向用户提供有关需要多长时间的反馈.
我不会假装记住我在很多方面所做的事情,但如果它有助于随意使用它.
# Gemfile # For client-side multiple uploads gem "jquery-fileupload-rails" # For file uploads and Amazon S3 storage gem "rmagick" gem "carrierwave" gem "fog"
这是观点:
# app/views/testimonials/new.html.erb <div id="main" class="padded"> <div class="center"> <div id="dropzone"> Click or Drop Files here to Upload </div> <%= form_for @testimonial do |f| %> <div class="field"> <%= file_field_tag :image,multiple: true,name: "testimonial[image]",id: "testimonial_image" %> </div> <% end %> </div> </div> <div id="mask"></div> <div id="modal"> <h1> Uploading <span id="global-upload-count">0</span> Files... </h1> <div id="global-progress"> <div id="global-progress-bar" style="width: 0%"> <div id="global-progress-percentage">0%</div> </div> </div> <div id="global-processing"> <span class="spinner"></span> Processing...<span id="global-processing-count">0</span> sec </div> </div> <script id="template-upload" type="text/x-tmpl"> <div class="upload"> {%=o.name%} ({%=o.readable_size%}) <div class="float-right percentage"></div> <div class="progress"><div class="bar" style="width: 0%"></div></div> </div> </script>
和JS:
number_to_human_size = (bytes) -> sizes = ['Bytes','KB','MB','GB','TB'] i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))) return Math.round(bytes / Math.pow(1024,i),2) + ' ' + sizes[i] dropzone_hover = (E) -> e.preventDefault() $(this).addClass("dropzone-hover") dropzone_leave = (E) -> e.preventDefault() $(this).removeClass("dropzone-hover") jQuery -> global_count = 0 seconds_to_process = 0 processing_factor = 5 # seconds to convert/process each uploaded file $("#testimonial_image").hide() dropzone = $("#dropzone") dropzone.bind "click",(E) -> $("#testimonial_image").click() dropzone.bind("dragover",dropzone_hover) dropzone.bind("dragleave",dropzone_leavE) dropzone.bind("drop",dropzone_leavE) $("#new_testimonial").data("global-count","0") $("#new_testimonial").fileupload dropZone: $("#dropzone") maxFileSize: 5000000 # 5 MB dataType: "script" add: (e,data) -> file = data.files[0] file.readable_size = number_to_human_size(file.sizE) data.context = $(tmpl("template-upload",filE).trim()) $("#new_testimonial").append(data.context) data.submit() global_count += 1 progress: (e,data) -> if Data.context progress = parseInt(data.loaded / data.@R_385_10586@l * 100,10) data.context.find(".bar").css("width",progress + "%") data.context.find(".percentage").text(progress + "%") submit: (e,data) -> $("#mask").show() $("#modal").center().show() progressall: (e,data) -> $("#global-upload-count").text(global_count) global_progress = parseInt(data.loaded / data.@R_385_10586@l * 100,10) $("#global-progress-bar").css("width",global_progress + "%") $("#global-progress-percentage").text(global_progress + "%") if global_progress >= 100 seconds_to_process = global_count * processing_factor $("#global-processing-count").text(seconds_to_process) $("#global-processing").show() timer = seTinterval(-> seconds_to_process = seconds_to_process - 1 $("#global-processing-count").text(seconds_to_process) if seconds_to_process == 0 clearInterval(timer) global_count = 0 seconds_to_process = 0 $("#modal,#mask").hide(0),1000)
推荐模型:
class Testimonial < ActiveRecord::Base mount_uploader :image,ImageUploader def display_name if name.blank? return "Testimonial #{self.iD}" else return name end end end
以上是大佬教程为你收集整理的jquery – 使用Rails 3.2和AJAX(非Flash上传解决方案)将多个文件直接上传到Amazon S3全部内容,希望文章能够帮你解决jquery – 使用Rails 3.2和AJAX(非Flash上传解决方案)将多个文件直接上传到Amazon S3所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。