在Ruby on Rails（Rails）框架中，为文件上传添加进度条功能可以显著提升用户体验，让用户在上传大文件时能够实时了解进度，增加交互性。在本文中，我们将深入探讨如何在Rails应用中实现这一功能。
我们需要一个前端库来处理进度条显示。常见的选择有jQuery File Upload、Dropzone.js或Vue.js的vue-dropzone组件。这些库不仅提供进度条，还支持多文件上传、预览等功能。这里我们以jQuery File Upload为例，它与Rails的集成相对简单。
1. **安装jQuery和jQuery File Upload**
在`Gemfile`中添加`jquery-rails` gem，然后运行`bundle install`。接着，在`app/assets/javascripts/application.js`中引入jQuery和jQuery File Upload库：
```javascript
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require blueimp-file-upload/jquery.fileupload
```
2. **创建上传控制器**
创建一个新的控制器，例如`uploads_controller.rb`，并定义相应的CRUD操作，如`create`用于接收上传的文件。
3. **配置路由**
在`config/routes.rb`中添加对应的路由：
```ruby
resources :uploads, only: [:create]
```
4. **创建上传表单**
在视图中创建一个HTML表单，使用`multipart/form-data` enctype，这样文件才能通过POST请求发送。同时，设置`data-url`属性指向上传控制器的创建动作，并添加jQuery File Upload的初始化代码：
```html
<%= form_tag uploads_path, multipart: true, id: "fileupload" do %>
<div class="fileupload-buttonbar">
<span class="btn btn-primary fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<%= file_field_tag 'files[]', multiple: true %>
</span>
</div>
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<% end %>
<script>
$('#fileupload').fileupload({
url: '<%= uploads_path %>',
dataType: 'json',
done: function (e, data) {
// 处理上传完成后的逻辑
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css('width', progress + '%');
}
});
</script>
```
5. **处理上传**
在`uploads_controller.rb`的`create`方法中，处理文件上传，将其保存到数据库或指定目录：
```ruby
def create
params[:files].each do |file|
# 保存文件到服务器，例如存储到public/uploads目录
File.open(Rails.root.join('public', 'uploads', file.original_filename), 'wb') do |f|
f.write(file.read)
end
# 或者将文件信息存入数据库
# @upload = Upload.new(file: file)
# @upload.save
end
render json: { success: true }
end
```
6. **样式和响应式设计**
根据项目需求，使用CSS（如Bootstrap或自定义样式）调整进度条的样式，确保在不同设备上显示正常。同时，可以使用JavaScript或jQuery动态更新进度条的宽度以显示上传进度。
通过以上步骤，我们已经成功地在Rails应用中实现了文件上传的进度条功能。当然，这只是一个基础实现，实际应用中可能需要考虑更多细节，比如错误处理、文件类型检查、大小限制等。此外，还可以结合后端存储服务（如AWS S3或Google Cloud Storage）进行更高效的文件管理。
progress_bar.rar （6个子文件） 
progress_bar 
progress_bar.css 646B
index.html 581B
bar.gif 6KB
