重命名上传的Ruby On Rails文件

时间:2013-12-17 15:32:18

标签: javascript jquery ruby-on-rails ruby ruby-on-rails-3

我使用jquery-multiupload-rails创建多重上传。

这样的工作,但当我想要修改我的文件的标题时,标题是2个文件的使用是相同的,文件1的标题1和文件2的标题2等....

我使用javascript来做这件事。

我的表单在javascript中

<%= form_for Sound.new , :html => { :multipart => true, :id => "fileupload"  } do |f| %>
  <!-- Redirect browsers with JavaScript disabled to the origin page -->
  <noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>
  <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
  <div class="row fileupload-buttonbar">
    <div class="span7">
      <!-- The fileinput-button span is used to style the file input field as button -->
      <span class="btn btn-success fileinput-button">
        <i class="icon-plus icon-white"></i>
        <span>Add files...</span>
        <%= f.file_field :file, multiple: true, id: 'upload-field' %>
      </span>
      <button type="submit" class="btn btn-primary start">
        <i class="icon-upload icon-white"></i>
        <span>Start upload</span>
      </button>
      <button type="reset" class="btn btn-warning cancel">
        <i class="icon-ban-circle icon-white"></i>
        <span>Cancel upload</span>
      </button>
      <button type="button" class="btn btn-danger delete">
        <i class="icon-trash icon-white"></i>
        <span>Delete</span>
      </button>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr class="template-upload fade">
    <td class="preview"><span class="fade"></span></td>
    <td class="name"><span>{%=file.name%}</span></td>
    <td class="title"><input name="title[]" value='{%=file.name%}' required></td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

我知道我的错误在于这一行: 如果我使用title [],那么对于2个文件,标题是“title1,title2”。如果我只使用2个文件的标题,文件1和文件2只有“title2”。

<td class="title"><input name="title[]" value='{%=file.name%}' required></td>

我的控制器#create

def create
    @sound = Sound.new(params[:sound])
    @sound.title = params[:title].to_s.gsub(/\[|\]|"/,'')
    respond_to do |format|
      if @sound.save
        redirect_to sounds_path
      else
        format.html { render action: "new" }
        format.json { render json: @sound.errors, status: :unprocessable_entity }
      end
    end
  end

控制台

    Started POST "/sounds" for 127.0.0.1 at 2013-12-17 17:59:09 +0100
Processing by SoundsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"Ke1wOlf1z+eoQ6cS0lpQraqsiiU0BXoT2VtFweGed18=", "title"=>"309060_4371516803467_1048226528_n.jpg", "sound"=>{"file"=>#<ActionDispatch::Http::UploadedFile:0x007fa626cbff88 @original_filename="14591_4925922503263_818636474_n.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"sound[file]\"; filename=\"14591_4925922503263_818636474_n.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/sj/sr703c8n6llc198jfg6746d40000gn/T/RackMultipart20131217-2706-itxsfb>>}}
   (0.1ms)  begin transaction
  SQL (0.6ms)  INSERT INTO "sounds" ("created_at", "file", "name", "title", "updated_at") VALUES (?, ?, ?, ?, ?)  [["created_at", Tue, 17 Dec 2013 16:59:09 UTC +00:00], ["file", "14591_4925922503263_818636474_n.jpg"], ["name", nil], ["title", "309060_4371516803467_1048226528_n.jpg"], ["updated_at", Tue, 17 Dec 2013 16:59:09 UTC +00:00]]
   (1.1ms)  commit transaction
Redirected to http://localhost:3000/sounds
Completed 406 Not Acceptable in 14ms (ActiveRecord: 1.8ms)


Started POST "/sounds" for 127.0.0.1 at 2013-12-17 17:59:09 +0100
Processing by SoundsController#create as JSON
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"Ke1wOlf1z+eoQ6cS0lpQraqsiiU0BXoT2VtFweGed18=", "title"=>"309060_4371516803467_1048226528_n.jpg", "sound"=>{"file"=>#<ActionDispatch::Http::UploadedFile:0x007fa625a8d9a0 @original_filename="25490_392719757235_767862235_3946737_600749_n.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"sound[file]\"; filename=\"25490_392719757235_767862235_3946737_600749_n.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/sj/sr703c8n6llc198jfg6746d40000gn/T/RackMultipart20131217-2706-d32r2a>>}}
   (0.1ms)  begin transaction
  SQL (0.4ms)  INSERT INTO "sounds" ("created_at", "file", "name", "title", "updated_at") VALUES (?, ?, ?, ?, ?)  [["created_at", Tue, 17 Dec 2013 16:59:09 UTC +00:00], ["file", "25490_392719757235_767862235_3946737_600749_n.jpg"], ["name", nil], ["title", "309060_4371516803467_1048226528_n.jpg"], ["updated_at", Tue, 17 Dec 2013 16:59:09 UTC +00:00]]
   (2.0ms)  commit transaction
Redirected to http://localhost:3000/sounds
Completed 406 Not Acceptable in 8ms (ActiveRecord: 2.4ms)

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

&#13;
&#13;
<td class="title"><input name="sound[title]" value='{%=file.name%}' required></td>

or 

<td class="title"><span><input type="text" name="sound[title]"value="{%= file.name.split('/').pop().split('.').shift()%}" required/></span></td>
&#13;
&#13;
&#13;

在提交回调中添加此内容

&#13;
&#13;
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    if (inputs.filter('[required][value=""]').first().focus().length) {
        return false;
    }
    data.formData = inputs.serializeArray();
 });
&#13;
&#13;
&#13;

.first()将获取第一个输入值。