Question

我正在使用集成到我的Rails 3.2.1应用程序中的jQuery文件上传插件（文档here）（基于文档here设置）将照片上传到我的应用程序中。

我已设置插件，以便自动上传所有已选择的文件，而无需用户执行任何其他操作。上传照片后（以及在数据库中创建的相应条目），我希望用户能够为每张照片输入标题。

但是，在显示上传照片的模板脚本中，我很难为每张上传的照片创建一个编辑表单。我知道为每张照片创建一个表单远非优雅，但它似乎是这种情况下的唯一方式（除非我在这里遗漏了一些明显的东西？）。

<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
            <div class="template-download nofade">
                {% if (file.error) { %}
                    {%=file.name%}
                    <span>{%=fileUploadErrors[file.error] || file.error%}</span>
                {% } else { %}
                    {% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.mini_url%}"></a>
                        <%= form_for Photo.find(<---- ID SHOULD BE HERE ---->) do |f| %>
                            <%= f.text_field :title %>
                            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"><i class="icon-white icon-trash"></i> Delete</button>
                            <%= f.submit %>
                        <% end %>
                    {% } %}
                {% } %}
            </div>
    {% } %}
</script>

我有一个

变量

file.photo_id

包含相关照片的ID，但尝试从

创建表单

<%= form_for Photo.find("{%= file.photo_id %}") do |f| %>

仅返回此错误：

Couldn't find Photo with id={%= file.photo_id %}

我也尝试过像Photo.find（{％= file.photo_id％}）这样的变体，但无济于事。

我知道这对于特定的插件来说是一个非常具体的问题，但是认为它仍然值得一提。任何人都知道如何传递照片ID，或者更好地提示如何以更优雅的方式解决这个问题？

Answer 1

上传完所有文件后，插件会使用template-download

列出所有文件

我建议使用ajax over form submit来更新页面上显示的每个文件的标题。

以下是如何实现这一目标

<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
            <div class="template-download nofade">
                {% if (file.error) { %}
                    {%=file.name%}
                    <span>{%=fileUploadErrors[file.error] || file.error%}</span>
                {% } else { %}
                    {% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.mini_url%}"></a>
                            <input type="text" size="30" name="photo"/>
                            <a href="photos/{%=file.photo_id%}" class=".update-btn">Save</a>
                            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"><i class="icon-white icon-trash"></i> Delete</button>
                    {% } %}
                {% } %}
            </div>
    {% } %}
</script>

如果您发现，我已将form_tag替换为

<input type="text" size="30" name="photo"/>
<a href="photos/{%=file.photo_id%}" class=".update-btn">Save</a>

现在，您会在每个文本框旁边看到保存链接以输入标题。

接下来是单击链接的操作。

$(function() {
     $('.update-btn').live("click", function() {
        var title = $(this).previous();
        $.ajax({
            url: $(this).attr('href'),
            type: "POST",
            data: { _method: 'PUT', title.attr('name'): title.val() },
            dataType: 'json',            
            success: function(msg) {
               //You may disable link after successful action
            }
        });
     });
  });

以上代码将点击事件绑定到每个保存链接，并将 PUT 请求发送到 PhotosController 。

我不擅长javascript / jQuery但它应该可以工作。

上传后编辑照片

1 个答案: