当我们提交表单但是又不想要刷新页面的时候就可以考虑使用ajax来实现提交功能,但是这有个局限就是当有文件上传的时候是行不通的,下面借助于jquery.form可以很方便满足我们的需求.
 
1.表单写法:
<form class="ui form error-page" id="error_page" method="post" action="{{ url('web/save/error-page') }}" enctype="multipart/form-data">
  <input type="text" name="upload_item_key[0]" placeholder="错误代码">
  <input type="file" name="upload_item_value[0]" style="display:none;">
  <input type="text" name="upload_item_key[1]" placeholder="错误代码">
  <input type="file" name="upload_item_value[1]" style="display:none;">
  <input type="text" name="upload_item_key[2]" placeholder="错误代码">
  <input type="file" name="upload_item_value[2]" style="display:none;">
</form>
<div class="ui green button save">保存</div>
 
2.ajax写法(借助于Jquery.form):
$(document).ready(function () {
  var options = {
    success: function (data) {
    //成功后的操作
    }
  };
 
  $(".save").click(function () {
    $("#error_page").ajaxSubmit(options);
  });
});
 
3.后台接收情况(使用了laravel框架)
 
$request->input('upload_item_key')
//file为空和不为空的时候并不能使用一个数组接收,因为需要key和value要对应,所以分别接收,因为upload_item_value[x]有后缀,顺序不会乱,建议亲自试试
$request->input('upload_item_valuey') //当其中有个file为空时
$request->file('upload_item_value') //接收file不为空的项
 
 
当然不要忘记引入插件,jquery.form官网 :http://plugins.jquery.com/form/

ajax提交表单,支持文件上传的更多相关文章

  1. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  2. Struts2文件上传(基于表单的文件上传)

    •Commons-FileUpload组件 –Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件上传的子项目   •Commons-Fil ...

  3. [原创]java WEB学习笔记49:文件上传基础,基于表单的文件上传,使用fileuoload 组件

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  4. 表单多文件上传样式美化 && 支持选中文件后删除相关项

    开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进 ...

  5. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  6. php+form表单的文件上传

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 2020最新Servlet+form表单实现文件上传(图片)

    servlet实现文件上传接受 这几天学了一点文件上传,有很多不会,在网查了许多博客,但是最新的没有,都比较久了 因为我是小白,版本更新了,以前的方法自己费了好久才弄懂,写个随笔方便以后查找 代码奉上 ...

  8. form表单多文件上传

    1.html/jsp主页 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  9. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

随机推荐

  1. app开发,H5+CSS3页面布局小tips

    1.inline-block使用后带来的间隔影响 2.竖线的处理 3.ssh公匙 4.星星组件的巧妙用法 5.api.js的$api对象与 安卓原生引擎的api对象,均相当于jQuery的$对象 6. ...

  2. Tomcat8

    一.Apache Tomcat 8介绍 Tomcat 8.0.0-RC3 (alpha) Released                                                ...

  3. 使用NIO快速复制Java文件

    package com.test.test; import java.io.File;import java.io.FileInputStream;import java.io.FileOutputS ...

  4. c++ STL stack容器成员函数

    这是后进先出的栈,成员函数比较简单,因为只能操作栈顶的元素.不提供清除什么的函数. 函数 描述 bool s.empty() 栈是否为空(即size=0).若空,返回true,否则,false. vo ...

  5. IOS 控制器的数据传递 (顺传 and 逆传)

    ● 控制器之间的数据传递主要有2种情况:顺传和逆传 ➢ 顺传 ●  控制器的跳转方向: A ->C ●  数据的传递方向 : A -> C ● 数据的传递方式 : 在A的prepareFo ...

  6. Codeforces Round #327 (Div. 2) B Rebranding(映射)

    O(1)变换映射,最后一次性替换. #include<bits/stdc++.h> using namespace std; typedef long long ll; ; char s[ ...

  7. PHP读取文件的常见方法

    整理了一下PHP中读取文件的几个方法,方便以后查阅. 1.fread string fread ( int $handle , int $length ) fread() 从 handle 指向的文件 ...

  8. XGBoost算法原理小结

    在两年半之前作过梯度提升树(GBDT)原理小结,但是对GBDT的算法库XGBoost没有单独拿出来分析.虽然XGBoost是GBDT的一种高效实现,但是里面也加入了很多独有的思路和方法,值得单独讲一讲 ...

  9. spring data事务

    事务在spring data中的使用 1:事务一般在service层.因为一个service方法可能会多次调用不同的dao,为了保证事务的完整性,那么多次的dao都放到一个方法里面 2:读的时候可以不 ...

  10. linux系统快捷键使用

    本文记录linux系统中快捷键的使用 Ctrl + l 清屏,相当于clear命令Ctrl + o 执行当前命令,并重新显示本命令Ctrl + s 阻止屏幕输出,锁定Ctrl + q 允许屏幕输出Ct ...