相关疑难解决方法(0)

我有一个属性的div data-myval = "10".我想更新它的价值; 如果我使用它会不会改变div.data('myval',20)？我div.attr('data-myval','20')只需要使用吗？

我在HTML5和jQuery之间感到困惑吗？请指教.谢谢!

编辑:更新div.data('myval')=20到div.data('myval',20),但仍然不支持HTML代码更新.

这个问题困扰了我好几个小时,我似乎无法找到解决方案.

我有一个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)这样做,所以我不想要任何第三方工具.另外,在深入学习这个问题的过程中,我正在避免使用任何插件,并且我正在尝试自己编写代码.

我想要获得的功能是:

1. 用户看到带有文件字段的表单(或拖放)
2. 用户选择多个文件(单击文件字段或拖放)
3. 使用Javascript(还没有服务器),构建一个要上传的选定文件的队列(只使用浏览器文件API,只需文件名和大小)
4. 然后,用户单击"开始上载"按钮
5. 迭代队列中的每个文件并将文件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 …

我正在尝试使用jQuery-File-Upload和aws-sdk gem直接在Rails中实现Amazon S3上传,并遵循heroku直接向S3上传说明.这是在html中生成的上传表单:

<form id="pic-upload"
class="directUpload" 
data-form-data="{
"key":"uploads/59c99e44-6bf2-4937-9680-02c839244b33/${filename}",
"success_action_status":"201",
"acl":"public-read",
"policy":"eyJle...In1dfQ==",
"x-amz-credential":"AKIAJCOB5HQVW5IUPYGQ/20160101/us-east-1/s3/aws4_request",
"x-amz-algorithm":"AWS4-HMAC-SHA256",
"x-amz-date":"20160101T010335Z",
"x-amz-signature":"0f32ae...238e"}" 
data-url="https://websmash.s3.amazonaws.com" 
data-host="websmash.s3.amazonaws.com"
enctype="multipart/form-data"
action="/users/bazley/update_pictures" 
accept-charset="UTF-8" 
method="post">

这是相应的jQuery:

$(function() {
  $('.directUpload').find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    var form         = $(fileInput.parents('form:first'));
    var submitButton = form.find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);
    fileInput.fileupload({
      fileInput:       fileInput,
      url:             form.data('url'),
      type:            'POST',
      autoUpload:       true,
      formData:         form.data('form-data'),
      paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
      dataType: …

我决定将我的应用程序部署到Heroku,我正在关注他们的教程.但是,我现在尝试使用回形针插件连接到我的Amazon S3存储桶,我收到此错误:

Images#index中的ArgumentError

显示第19行引发的app/views/images/index.html.erb:

第0行,第39栏的语法错误:`bucket:(MY BUCKET HERE)
access_key_id :(我的访问密钥ID在这里)
secret_access_key :(我的秘密访问密钥在这里)
'
提取的来源(第19行附近):

16:<%= H image.created_at%>
17:<%= H image.updated_at%>
18:
19:<%如果image.img.exists？然后%>
20:

<%= image_tag image.img.url(:thumb)%>

21:<%else%>
22:

没有附上照片,上传一张.

RAILS_ROOT:C:/ Users/Mariusz/Sites/wiw_development

应用程序跟踪| 框架跟踪| 完整跟踪
C:/Ruby/lib/ruby/1.8/yaml.rb:133:在加载' C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/storage.rb:236:in parse_credentials'C :/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/storage.rb:138:in instance_eval'C :/ Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib /paperclip/storage.rb:137:in 延伸' C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/attachment.rb:269:在初始化' C:/用户/马里乌什/站点/wiw_development/vendor/plugins/paperclip/lib/paperclip.rb:326:in attachment_for'load'
C:/Ruby/lib/ruby/1.8/yaml.rb:133:in
find_credentials'
C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/storage.rb:176:in
extended'
C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/storage.rb:137:in
extended'
C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/attachment.rb:269:in
initialize_storage'
C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip/attachment.rb:51:in
new'
C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip.rb:326:in
C:/Users/Mariusz/Sites/wiw_development/vendor/plugins/paperclip/lib/paperclip.rb:229:in _run_erb_app47views47images47index46html46erb'C :/Users/Mariusz/Sites/wiw_development/app/views/images/index.html.erb :12:在_run_erb_app47views47images47index46html46erb'C :/Users/Mariusz/Sites/wiw_development/app/controllers/images_controller.rb:7:在'index'中 img'
C:/Users/Mariusz/Sites/wiw_development/app/views/images/index.html.erb:19:in
each'
C:/Users/Mariusz/Sites/wiw_development/app/views/images/index.html.erb:12:in

我的文件看起来像这样:

1)app/models/image.rb

class Image <ActiveRecord :: Base
has_and_belongs_to_many:pairs
validates_presence_of:img_file_name
has_attached_file:img,:styles => {:thumb =>"100x100#",:page =>"400x320>"} …