您的位置：首页 > 其它

使用ajax提交表单有很多优势（下面是一个上传文件的实例 new FormData class）

2017-07-27 15:43 726 查看

<!DOCTYPE html>
<html>
<head>
<include file="Common@Public/head" />
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
</head>
<body>
<include file="Common@Public/dhb_info" />
<include file="Common@Public/header" />
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" action="{:U('TagBatch/batchHandle')}" id="tel_tag_form">
<div class="form-group">
<label class="col-sm-2 control-label" style="margin-right:16px;">号码</label>
<input type="file" name="tel_list"/>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">标签</label>
<div class="col-sm-5">
<select class="form-control" name="itag_id">
<foreach name="tag_list"  item="vo">
<option value="<?php  echo $vo['id']?>" ><?php  echo $vo['itag']?></option>
</foreach>
</select>
</div>
</div>
<div class="form-group" data-toggle="buttons">
<label class="col-sm-2 control-label" style="margin-right:15px;">操作</label>
<label class="btn btn-primary active" style="margin-right:40px;">
<input type="radio" name="handle_type" id="option1" value="up_line" checked>上线
</label>
<label class="btn btn-primary ">
<input type="radio" name="handle_type" id="option2" value="down_line">下线
</label>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="smt" type="submit" style="width:50%" class="btn btn-primary  btn-block">上传</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#tel_tag_form").submit(function(){
console.log('form submit start');
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: $(this).attr("action"),
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
}
});
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

使用ajax提交表单有很多优势 （下面是一个上传文件的实例 new FormData class）

使用ajax提交表单有很多优势（下面是一个上传文件的实例 new FormData class）