.modal-body
          .container-fluid
            .row
              .col-md-12
                1.下载模板文件
                = link_to '模板文件'
            .row
              .col-md-12
                = form_tag '', :id => "my-form" do
                  .input-group
                    %span.input-group-btn
                      %button#fake-file-button-browse.btn.btn-default{:type => "button"}
                        %span.glyphicon.glyphicon-file
                    = file_field_tag :category_file, :id => "files-input-upload", :style => "display:none"
                    %input#fake-file-input-name.form-control{:disabled => "disabled", :type => "text"}/
                    %span.input-group-btn
                      %button#fake-file-button-upload.btn.btn-default{:disabled => "disabled", :type => "button"}
                        %span.glyphicon.glyphicon-upload

使用formdata得到完整表单,将formdata作为data值传递给后台,就如同点击submit提交数据一样。注意此处的url和type对应的值不能直接写到表单里面,而应写在ajax的配置参数中

  $('#fake-file-button-upload').click(function() {
    var form = new FormData(document.getElementById('my-form'));

    $.ajax({
      url: "/tax_categories/get_category",
      type: "POST",
      data: form,
      dataType: "json",
      processData: false,  // 不处理数据
      contentType: false,  //要加
      success: function(data) {
        console.log(data);
        if (data.result == "error") {
          alert(data.result);
        } else {
          console.log("save success");
          window.location = "/tax_categories"
        }
      }
    });
  });

使用creek解析xml

require 'creek'

def get_category
    flag = true
    begin
      file = params[:category_file]
      creek = Creek::Book.new file.path
      sheet = creek.sheets[0]
      sheet.rows.each do |row|
        puts row
      end
    rescue
      flag = false
    end

    if flag
      respond_to do |f|
        f.json {
          render :json => {:result => "success"}.to_json
        }
      end
    else
      respond_to do |f|
        f.json {
          render :json => {:result => "error"}.to_json
        }
      end
    end
  end

此处还有个比较二的问题,是发生了302重定向,刚开始controller中的代码是如下,在解析成功后想直接跳转,可是在ajax的请求下,产生的是302重定向,在浏览器中并不会显示跳转。所以采用在js中location定位到新的页面

  if flag
       redirect_to tax_categories_url
    else
      respond_to do |f|
        f.json {
          render :json => {:result => "error"}.to_json
        }
      end
    end

ajax使用formdata 提交excel文件表单到rails解析的更多相关文章

  1. Ajax 使用formdata 实现 无刷新表单上传

    FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...

  2. Ajax发送FormData对象封装的表单数据

    前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  3. Java使用HTTP编程模拟多参数多文件表单信息的请求与处理

    本文目的是提供Java环境下模拟浏览器页面提交多参数多文件表单请求以及解析请求的Demo代码.这里用Java提供的HttpURLConnection类做HTTP请求,再原始点可以直接使用socket. ...

  4. SpringMVC 完美解决PUT请求参数绑定问题(普通表单和文件表单)

    一 解决方案 修改web.xml配置文件 将下面配置拷贝进去(在原有的web-app节点里面配置 其它配置不变) <!-- 处理PUT提交参数(只对基础表单生效) --> <filt ...

  5. Jquery serialize()提交多个表单数据

    ajax提交多个表单数据: 先把不同的表单分别用serialize()函数,然后把序列化后的数据用+拼接提交给后台,具体例子如下 var data1 = $('#form1).serialize(); ...

  6. javaWeb中一个按钮提交两个表单

    一个按钮提交两个表单,有时候会用到,一般会很容易想到使用 onclick="document.form1.submit();document.form2.submit();" 的方 ...

  7. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  8. Form表单 JSON Content-type解析

    Form表单 JSON Content-type解析 1 表单Form概述 在Form表单中,参数一般有: action 表单提交的url method 提交方式:post get name 表单的属 ...

  9. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

随机推荐

  1. c++ what happens when a constructor throws an exception and leaves the object in an inconsistent state?

    为什么会想到这个问题?因为我总是不自觉地将c++和java进行对比.java对这种情况的处理方式是constructor返回一个null,然后已经构造的objects交给Garbage Collect ...

  2. deepin下安装python的Tkinter库

    在Linux下,如果需要编写界面应用,并且此界面应用对性能的要求不是很高,一般可以使用Python解决.Python中可以使用自带的Tkinter库或者是第三方的Wxpython库,当然Tkinter ...

  3. Android Studio 使用笔记:给包重命名~~有点水

    很简单,选择需要重命名的包,按下 Shift + F6 这时候出现提示,选择 Rename package 输入新的包名,Refactor按钮会变亮,点击就可以了. 注意:这个是重命名一个包名,想做 ...

  4. imx6中iomux IO复用

    IOMUX Controller (IOMUXC) IO多路复用控制器1.overviewThe IOMUX Controller (IOMUXC), together with the IOMUX, ...

  5. Servlet 客户端 HTTP 请求

    当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的.您可以查看 HTTP 协议 了解更多相关信息. 以下是来自于浏 ...

  6. mongo 过滤查询条件后分组、排序

    描述:最近业主有这么一个需求,根据集合中 时间段进行过滤,过滤的时间时间段为日期类型字符串,需要根据某一日期进行截取后.进行分组,排序 概述题目:根据createTime时间段做查询,然后以 天进行分 ...

  7. Python2.6升级Python2.7

    Python2.6升级2.7 由于Centos6系列自带的python版本为2.6.6,然而有很多应用需要依赖于python2.7来实现,所以有了这个升级的需求.升级原理很简单,无非就是下载.编译.安 ...

  8. PHP输出语句大杂烩

    一 echo echo() 实际上不是一个函数,是php语句,因此您无需对其使用括号.不过,如果您希望向 echo() 传递一个以上的参数,那么使用括号会发生解析错误.而且echo是返回void的,并 ...

  9. splay tree旋转操作 hdu 1890

    很神奇的旋转操作. 目前没看到其他数据结构能实现这个功能.平衡树不好处理区间操作,线段树很难旋转.splay tree搞这个就很简单了. 下面用的这个模板跑了700ms,好慢,估计是删除操作太费时了, ...

  10. 记录--java获取网络资源(图片、音频等)保存本地

    注:本人开始运行下面报 java.io.FileNotFoundException ,纠结很久后清理tomcat后运行成功 //获取wav文件地址 String vRecordUrl=(request ...