Javascript JQuery文件在Rails中上传-表单仍然发送HTML请求吗?
我尝试使用以下表单进行异步上传,但micropost#create正在响应HTML请求。关于如何让我的上传表单发送JS请求,有什么建议吗 app/views/shared/_micropost_form.html app/controllers/micropost_controller.rb [编辑] app/views/microscops/create.js.erb 试试这个Javascript JQuery文件在Rails中上传-表单仍然发送HTML请求吗?,javascript,jquery,ruby-on-rails,ruby,jquery-file-upload,Javascript,Jquery,Ruby On Rails,Ruby,Jquery File Upload,我尝试使用以下表单进行异步上传,但micropost#create正在响应HTML请求。关于如何让我的上传表单发送JS请求,有什么建议吗 app/views/shared/_micropost_form.html app/controllers/micropost_controller.rb [编辑] app/views/microscops/create.js.erb 试试这个 <%= form_for @micropost, :html => {:multipart =>
<%= form_for @micropost, :html => {:multipart => true} do |f| %>
<p>
<%= f.file_field :picture, :multiple => true, :name => "micropost[picture]" %>
</p>
<% end %>
<script>
$(document).ready(function() {
var multiple_photos_form = $('#new_file_folder');
multiple_photos_form.fileupload({dataType: 'script'
add: function (e, data) {
types = /(\.|\/)(gif|jpe?g|png|bmp)$/i;
file = data.files[0];
if (types.test(file.type) || types.test(file.name)) {
data.submit();
}
else { alert(file.name + " must be GIF, JPEG, BMP or PNG file"); }
}
});
});
</script>
{:multipart=>true}do | f |%>
true,:name=>“micropost[图片]”%>
$(文档).ready(函数(){
var multiple_photos_form=$('new#u file_folder');
多张照片\u form.fileupload({dataType:'script'
添加:功能(e、数据){
类型=/(\.\/)(gif | jpe?g | png | bmp)$/i;
file=data.files[0];
if(types.test(file.type)| types.test(file.name)){
data.submit();
}
else{alert(file.name+“必须是GIF、JPEG、BMP或PNG文件”);}
}
});
});
希望这会对您有所帮助。您是否有.js或.js.erb模板要返回?@tangrufus Woops肯定应该包含这一点。当然可以,app/views/micropost/create.js.erb。如果您使用的是
turbolinks
,请尝试删除它,如果@micropost.save
失败,则似乎没有js模板可返回。我从application.js中删除了turbolinks,其他任何地方都不需要它。我刚刚为@micropost.save fail添加了一个js模板,并将其添加到我的原始帖子中。尽管如此,页面仍会完全刷新。更接近!feed正在更新,没有页面刷新,但是micropost没有被创建(没有图片,仍然可以正常工作)。我将相关的服务器日志添加到我的原始帖子中。另外,我只希望上传一张图片。将此:name=>“file\u folder[picture]”
更改为:name=>“microspost[picture]”
。。。。。。。我更新了我的答案,请查看。若要仅上载一张图像,我认为您需要从文件字段中删除multiple=>true,:name=>“microspost[picture]”
。让我们来看看。
jQuery ->
$('#micropost_form').fileupload
dataType: "script"
def create
@micropost = current_user.microposts.new(micropost_params)
@micropost.hashtags = @micropost.content.scan(/#\w+/).flatten.join(", ")
if @micropost.save
flash[:success] = "Post Created!"
respond_to do |format|
format.html {redirect_to root_url }
format.js
end
else
@feed_items = Micropost.all.paginate(page: params[:page]).per_page(10)
respond_to do |format|
format.html { render 'static_pages/home' }
format.js
end
end
end
<% if @micropost.new_record? %>
alert("Failed to upload <%=j @micropost.errors.full_messages.join(', ').html_safe %>.")
<% else %>
$('#feed').prepend('<%= j render(@micropost) %>')
<% end %>
$('#micropost_form_div').remove();
$('#new-micropost-link').show();
Started POST "/microposts" for 130.95.254.26 at 2015-06-09 07:05:02 +0000
Processing by MicropostsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"vQQhQEqn3Owt3arYsUTG0u8rrm9AabK7p4xq1N5hCY7SVUU+1oqM82kiEpkys8P+ju4OScp3te15hJOK/yiw5A==", "micropost"=>{"picture"=>[#<ActionDispatch::Http::UploadedFile:0x007f5a808e8fc8 @tempfile=#<Tempfile:/home/ubuntu/workspace/sample_app/RackMultipart20150609-8758-26fuon.png>, @original_filename="bitcomet-logo.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"micropost[picture][]\"; filename=\"bitcomet-logo.png\"\r\nContent-Type: image/png\r\n">], "content"=>""}, "commit"=>"Post"}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."name" ASC LIMIT 1 [["id", 1]]
Unpermitted parameter: picture
(0.1ms) begin transaction
(0.1ms) rollback transaction
gem 'carrierwave', '0.10.0'
gem 'mini_magick', '3.8.0'
gem 'jquery-rails', '4.0.3'
gem 'jquery-fileupload-rails'
<%= form_for @micropost, :html => {:multipart => true} do |f| %>
<p>
<%= f.file_field :picture, :multiple => true, :name => "micropost[picture]" %>
</p>
<% end %>
<script>
$(document).ready(function() {
var multiple_photos_form = $('#new_file_folder');
multiple_photos_form.fileupload({dataType: 'script'
add: function (e, data) {
types = /(\.|\/)(gif|jpe?g|png|bmp)$/i;
file = data.files[0];
if (types.test(file.type) || types.test(file.name)) {
data.submit();
}
else { alert(file.name + " must be GIF, JPEG, BMP or PNG file"); }
}
});
});
</script>