首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Rails 5 ajax上传文件的remotipart不起作用(作为HTML而不是JS发送)

Rails 5 ajax上传文件的remotipart不起作用(作为HTML而不是JS发送)。

问题描述:

在Rails 5中,使用ajax上传文件时,使用remotipart gem可能会遇到问题,即无法正常工作。具体表现为,文件以HTML形式而不是JS形式发送到服务器。

解决方案:

  1. 确保已正确安装并配置remotipart gem。可以通过在Gemfile中添加以下行来安装:gem 'remotipart', '~> 1.4'然后运行bundle install命令来安装gem。
  2. 确保在需要使用ajax上传文件的表单中,已正确设置remote: true选项。例如:<%= form_with(model: @model, remote: true) do |form| %> <!-- 表单字段 --> <% end %>
  3. 确保在控制器的相应动作中,已正确处理文件上传。可以使用respond_toformat.js来处理JS响应。例如:def create @model = Model.new(model_params) respond_to do |format| if @model.save format.html { redirect_to @model, notice: 'Model was successfully created.' } format.js # 处理JS响应 else format.html { render :new } format.js # 处理JS响应 end end end
  4. 确保在视图中,已正确使用remote: true选项来触发ajax提交。例如:<%= form.submit "Submit", remote: true %>
  5. 如果上述步骤都正确配置,但问题仍然存在,可以尝试使用其他的文件上传gem,如CarrierWave或Paperclip。

推荐的腾讯云相关产品:

腾讯云对象存储(COS):腾讯云提供的高可用、高可靠、低成本的云端存储服务,适用于存储和处理大规模非结构化数据,如图片、音视频、文档等。详情请参考:腾讯云对象存储(COS)

腾讯云云服务器(CVM):腾讯云提供的灵活可扩展的云服务器,可满足各种规模和业务需求。详情请参考:腾讯云云服务器(CVM)

腾讯云云数据库MySQL版:腾讯云提供的高性能、可扩展的云数据库服务,适用于各种规模的应用程序。详情请参考:腾讯云云数据库MySQL版

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

三分钟让你了解什么是Web开发?

这在服务器上作为HTML文件保存,可以使用web浏览器查看。浏览器从服务器请求文件,服务器端起它并关闭连接。 HTML是一种用于创建web页面的标准标记语言。...与CSS和JS一起将数据插入到HTML模板中。 以上所有代码都可以写在一个文件中。这是早期做法,但是发展联盟意识到这不是最优。要添加任何新特性,需要更改整个代码,在多开发环境中工作并不容易。...所以,如果你有了新邮件,不是刷新整个页面,你只是看到了一个新电子邮件在上面。这给用户提供了类似桌面的体验,并且成为了一种非常流行应用程序。 Ajax是什么?...使用Ajax,您将一个GET请求发送到服务器,服务器将其响应作为输出发送不阻塞当前web页面,这意味着用户可以继续做任何他们正在做事情,不会被打断。输出被追加或添加到当前网页。...得到:http://google.com 谷歌web服务器将处理其主/索引文件,并将响应发送回客户机。它通常会发送HTML内容和CSS文件,以及其他任何媒体文件

5.7K30

Web 开发会用到20款优秀开源工具

他可以自动编译代码,插入 CSS(或者 HTMLJS)到浏览器,所以不需要刷新。编译过程可以设置,例如结果文件格式和形式(压缩,嵌套)。...Brimir Brimir 是一个开源免费票务程序,使用 Ruby on Rails 构建,以及前端开发框架——Foundation。Brimir 允许你通过友好用户界面发送和接收邮件。...Monsta FTP Monsta FTP 是一个开源 PHP/Ajax 云服务,可以让在你浏览器中实现 FTP 文件管理功能,你可以往你浏览器中拖拽文件,然后就看到他们上传来,像魔术一样。...他不限制你用一种语言运行整个测试,所以你可以用一种语言开始,用另一种结束(比如 JS & PHP 代码作为相同测试)。...他只搜索有意义文件,所以速度很快,你可以忽略Subversion,Git 或者其他 VCS 目录以及其他不是代码目录,这样可以搜索全部树。

1.5K00

用selenium自动化验收测试

用 Selenium 自动化验收测试 如何使用 Selenium 测试工具对 Ruby on RailsAjax 应用程序进行功能测试 文档选项 将此页作为电子邮件发送 讨论 样例代码 拓展...验收测试与单元测试和组合测试有以下不同之处: 应用程序是作为一个完整端到端实体来测试不是像单元测试和组合测试那样,只是测试一个类或一组类。...背景知识 在讨论 Selenium 之前,我要介绍关于以下三个话题一些背景知识,因为这些话题虽然不是本文主题,但是和本文密切相关: 持续集成 Ajax Ruby/Ruby on Rails...Ajax 背后主要思想是,由于只需更新部分页面不是整个页面,所以 Web 应用程序可以更快地对用户操作做出响应。 Ajax 将更多复杂性引入到 Web 应用程序中,这一点也反映在测试中。...Rails 使用 YAML 不是 XML 配置文件以及注释形式反射和运行时扩展。这里不存在编译阶段 —— 程序修改后将直接运行。 回页首 什么是 Selenium?

6.1K30

09.Django基础七之Ajax

技术向服务器发送异步请求;       2.AJAX请求无须刷新整个页面;       3.因为服务器响应内容不再是整个页面,而是页面中部分内容,所以AJAX性能高; 5.作业     ...如果multiple_chunks()是真的话,你应该在一个循环中使用这个方法,不是使用read(); UploadedFile.name:上传文件名字(比如m_file.txt) UploadedFile.size...如果multiple_chunks()是真的话,你应该在一个循环中使用这个方法,不是使用read(); 在你保存上传文件之前,数据需要被保存在某些地方。...4.ajax和服务端数据交互时序列化问题   当我们给ajax回复不是一个字符串,而是其他数据类型时候,需要我们将数据转换为json字符串进行发送,这样好配合js进行json字符串处理,不然发送或者接受是普通字符串的话...一般情况下,我们希望这个script标签能够动态调用,不是像上面因为固定在html里面所以没等页面显示就执行了,很不灵活。

3.6K20

evaluateJavascript_javascript alert报错

当前位置:我异常网» Ajax » jquery.validationEngine 验证 AJAX 不起作用解决方 jquery.validationEngine 验证 AJAX 不起作用解决方法 www.myexceptions.net...网友分享于:2013-03-26 浏览:232次 jquery.validationEngine 验证 AJAX 不起作用解决办法 使用ajax时 返回必须是json形式: json名字可以随意,...但[0]位置 必须是验证控件id,[1]位置是是否成功 使用ajax时 一直处于等待验证状态,验证不起作用: 原因是因为内置json接收方式不对,所以 我们需要修改js文件代码 打开 jquery.validationEngine.js...文件 搜索 “.ajax” 找到第二个 .ajax 找到 success 回调处理函数 jsonValidateReturn就是你ajax处理返回json数据名字 success: function...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

3.3K20

PHP文件上传操作

HTML5学堂:关于文件上传,主要包括“构建基本表单”-“使用AJAX发送请求,上传文件”-“使用PHP获取文件基本信息”-“执行SQL语言,返回基本图片路径”-“使用DOM操作设置预览图路径”。...上图为上传文件后 核心知识 - 文件上传操作基本步骤 1、构建基本表单,并针对表单进行相关处理 2、在“上传文件”数据发生变化时候,使用AJAX发送请求 3、PHP获得到文件基本信息 4、PHP...在“上传文件”数据发生变化时候,使用AJAX发送请求 基本代码如下: $("#face").on("change", function(...第二个知识点,在于此处需要使用jquery.form.js插件辅助完成AJAX对数据提交——ajaxSubmit方法。 PHP获得到文件基本信息 <?...", response.url); 最后 奉上完全版本代码 HTML文件 - 基本结构与JS <!

4.9K50

在线 PHP运行工具实现思路及源码

实现思路 对于PHP文件而言,浏览器向服务器发送url请求时候,解释器就会自动文件翻译成了浏览器可以解析部分了。所以访问url过程就是获取php解释过数据过程。...temp.php文件里面,然后在访问这个temp.php文件,这样岂不是就可以得到我们想要结果啦。...事实上,我就是这么干,结果也证明,顺序得当的话,还是挺不错。...我想法就是: 给个按钮,点击按钮时候首先会把源代码发送到服务器上,接下来调用一个ajax请求,把源代码运行结果取出来,显示到“控制台”上。 制作 下面将介绍具体实现流程。...> 将main.php上传到服务器访问即可 分步讲解main.php功能 获取提交信息 经过这段代码,就可以将编辑好源码上传到服务器上指定temp.php上了,然后准备过程就结束了

2.4K20

前端处理图片上传几种方式

在用html5实现图片预览功能这篇文章中只是介绍了图片上传过程中预览实现,那关于图片上传有哪几种方式呢? 最常见一种就是用表单方式上传,在表单中增加一个input标签,type属性为file。...但是表单上传有个缺点,那就是上传完成后页面会发生跳转,不想发生跳转的话就要用到ajax上传,这里有个坑,我们在上传文本字符串时,通常会直接获取input标签vlaue值,那大家猜一猜如果我们获取上面代码中...这里大家要有一个基本认识,上传文件上传字符串,浏览器处理方式是完全不同,enctype=”multipart/form-data”时表示直接将二进制流上传enctype=application...那么怎么使用ajax上传图片呢,这里就用到了一个叫做formData方法。官方是这样解释:通过FormData对象可以组装一组用 XMLHttpRequest发送请求键/值对。...这里有一个坑,那就是向FormData append文件时,append不是这个inputvalue,而是inputfiles[0]属性,字段 "accountnum" 是数字类型,它将被FormData.append

4.9K61

Ajax第一节

e'sɪŋkrənəs] Javascript And XML, AJAX 不是一门语言,而是对现有技术综合利用。...,不是刷新整个页面。...给window注册scroll事件,当触底时,需要动态加载图片。 //5. 加载时,显示加载中提示信息,并且要求不能重复发送ajax请求 //6....受到了"同源策略"限制 新版本功能: 1. 可以设置timeout超时时间 2. 可以使用formData对象管理表单数据 3. 允许请求不同域名下数据(跨域) 4. 支持上传二进制文件 5....发送,不需要指定请求头,浏览器会自动选择合适请求头 xhr.send(formData); 文件上传 以前,文件上传需要借助表单进行上传,但是表单上传是同步,也就是说文件上传时,页面需要提交和刷新,

3.9K20

AJAX

AJAX AJAX = Asynchronous JavaScript and XML(异步 JavaScript 和 XML)。 AJAX 不是编程语言,而是一种使用现有标准新方法。...4.监听服务器发送响应 AJAX实现过程 1.一个简单html页面 <!...,type表示要从服务器端收到数据类型,有text|html|json|script,规定了返回数据类型后,如果服务器发送不是这种类型,那么不会执行回调函数 将上一节中func函数改为如下 function...2.$.getScript 通过 AJAX 请求来获得并运行一个 JavaScript 文件,即可以根据需要来决定是否引入 $.getScript("test.js", function(){ alert...("Script loaded and executed."); }); jquery1.2版本后可以跨域调用js文件 3.$.getJSON 相当于$.get()最后一个参数为json 4.$.ajax

4.2K20

ajax全套

Ajax,非XMLHttpRequest对象 +From结合 进行文件上传 iframe标签: 具有不刷新发送HTTP请求,打开页面的功能 From: 进行将数据打包,页面刷新 两者配合使用: 3、jQuery Ajax、原生 Ajax和伪Ajax上传文件   jQuery Ajax、原生 Ajax:先把数据放到FormData对象中,让后再把FormData对象放到XMLHttpRequest...上传文件,ifram+form // 基于XMLHttpRequest对象ajax依赖FormData对象兼容性不好,只有新浏览器支持 // 伪ajax没有兼容性问题 function...或者伪造     3.上传按钮只能那么丑,要是要做好看的话只能通过z-index和opacity要在这个按钮下面给一个自定义样式,原按钮透明度为0,这样我们看到就是下面的美样式,就是那个丑要死...只能用GET请求,因为src这个属性只能发送GET请求;      2.约定规则,客户端要把函数名发送给服务端,服务端应该用客户端发过来函数名去做funcname(arg)拼接不是自己写函数名,

3K20

项目开发知识盲区记录

推荐使用layui手动设置开关状态方式 springboot后端压缩和解压缩文件 mybaits-plus只更新不为null字段 js jQuery设置按钮被点击 layui文件上传控件,上传文件之后自动清空以选择文件...所以ajax请求之后,服务器返回都是纯文本流,客户端浏览器在获取ajax异步结果时,不是直接显示在页面上,而是要通过js来进行处理,js处理完以后才能显示在页面上,所以这才导致了controller...xml文件并没有被自动拉到target里面,毕竟编译是.java文件不是xml嘛,所以这时候应该在pom文件里面加上: ...---- layui文件上传报错: 请求上传接口出现异常 原因:返回不是JSON格式数据,或者返回JSON格式数据不满足要求 返回数据格式最好满足一下要求: //处理上传文件...---- js jQuery设置按钮被点击 $("#upload").trigger('click'); ---- layui文件上传控件,上传文件之后自动清空以选择文件 layui文件上传控件

6.8K31

React 学习路线图 2018版

资料 1.基础 i.HTML ·学习 HTML 基础 ·写些页面作为练习 ii.CSS ·学习 CSS 基础 ·在上一步练习基础上为页面添加样式...·使用 grid 和 flexbox 为页面布局 iii.JS 基础 ·熟悉语法 ·学习 DOM 基础操作 ·学习 JS经典机制...(提升、事件冒泡、原型) ·发起一些 AJAX (XHR) 请求 ·学习新功能 (ES 6+) ·此外,熟悉下 jQuery 库 2.开发通用技能...参与贡献 学习路线图是使用 Draw.io 画文件就放在 /src 目录下。想要修改思维导图,先打开 draw.io ,点击 Open Existing Diagram 然后选择 xml 文件。...之后就会打开思维导图,修改之后上传后更新 README PNG 图片 (需要导出),然后提交 PR 。 提交 PR 以帮助改进 在 issues 中进行讨论想法 帮忙宣传

2.4K41

axios使用指南

axios作为jquery中ajax替代产物,越来越多被前端工程师所使用,这个npm包使用非常灵活和强大,并且在nodejs端和浏览器端通用,在浏览器端axios内部封装是XMLhttprequest...接着看一下用axiso上传文件,自从大部分浏览器支持了HTML5formData对象后,文件上传变得就像吃饭喝水一样简单了,用axiso上传文件,只需将文件转换为formData对象作为参数传递到后端即可...js代码: ? 查看network如图, ? 可以看到,用axiso上传文件过程中,axiso会自动设置请求头为Content-Type:multipe/form-data。...因为一个文本框通过配置可以同时上传多个文件,所以files默认是个数组,我们示例只上传一个文件所以只取数组第一项。...上传文件演示完了,咱们看一下axios控制并发请求,因为axios是基于promise封装,所以axios支持Pormiseall方法,如果你对promise使用不是很熟悉的话,可以看下这篇文章Promise

2.6K41

《Kotin 极简教程》第14章 使用 Kotlin DSL第14章 使用 Kotlin DSL《Kotlin极简教程》正式上架:

比如用来显示网页HTML语言。更加典型例子是Gradle,它基于Ant 和 Maven,使用基于GroovyDSL 来声明项目构建配置 build.gradle,不是传统XML。...Rails之所以被称为DSL,原因之一在于Rails应用了一些Ruby语言特性,使得基于Rails编程看上去与基于通用目的Ruby语言编程并不相同。...kotlinx.html 是可在 Web 应用程序中用于构建 HTML DSL。 它可以作为传统模板系统(例如JSP、FreeMarker等)替代品。...> 其中,dsl.css文件内容如下 .ipad { margin: 10px } .center { text-align: center; } dsl.js 文件内容如下 $(function...DSL 风格HTML 代码搬到了后端,同时HTML元素将直接跟后端数据无缝交互,完成这些只是 Kotlin(当然,相应领域 DSL 基本语义模型还是要学习一下)。

2.1K10

组件分享之前端组件——文件上传小部件jQuery-File-Upload

适用于任何支持标准 HTML 表单文件上传服务器端平台(PHP、Python、Ruby on Rails、Java、Node.js、Go 等)。...无需浏览器插件(如Adobe Flash): 实现基于HTML5和JavaScript等开放标准,不需要额外浏览器插件。...传统浏览器优雅回退: 通过xmlhttprequest上传文件(如果支持),并使用iframes作为回退。...HTML文件上传表单回退: 允许使用标准HTML文件上传表单作为小部件元素逐步增强。 跨站点文件上传: 支持跨站点xmlhttprequest或iframe重定向上传文件到不同域。...兼容任何服务器端应用程序平台: 与任何服务器端平台(PHP, Python, Ruby on Rails, Java, Node.js, Go等),支持标准HTML表单文件上传

3.1K20
领券