码迷,mamicode.com
首页 > Web开发 > 详细

ajax提交表单,并且可以支持文件上传

时间:2017-06-03 16:22:27      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:需求   成功   err   art   实现   官网   value   写法   cli   

 

当我们提交表单但是又不想要刷新页面的时候就可以考虑使用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提交表单,并且可以支持文件上传

标签:需求   成功   err   art   实现   官网   value   写法   cli   

原文地址:http://www.cnblogs.com/redirect/p/6937454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!