JS FormData 文件异步提交
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta charset="utf-8">
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head> <body>
<form id="form1" enctype="multipart/form-data">
姓 名：<input class="input1" id="name" name="name" type="text" maxlength="20" placeholder="" value="" /><font color="red"> *</font><br/>
职 位：<input class="input1" id="position" name="position" type="text" maxlength="20" placeholder="" value="" /> </font><br/>
手机号码：<input class="input1" id="phone" name="phone" type="text" maxlength="11" placeholder="" value="" /><font color="red"> *</font><br/>
公司名称：<input class="input1" id="company" name="company" type="text" maxlength="20" placeholder="" value="" /><font color="red"> *</font><br/>
<select id="inviter" class="input1" name="inviter">
<option value="0">请选择邀请人</option>
<option value="陈秉俊">陈秉俊</option>
<option value="郭锦杭">郭锦杭</option>
<option value="彭维鹏">彭维鹏</option>
<option value="黎达丰">黎达丰</option>
<option value="李活">李活</option>
<option value="雷超">雷超</option>
</select>
<br>
<input type="file" name="photo" >
<br>
<input id="submit" class="submit" type="button" onclick="signup_submit()" value="立即报名" />
</form>
<script>
if( $("#name").val().trim().length==0 ){
alert("姓名不能为空");
return false;
}
var patt = /^1\d{10}$/;
if( $("#phone").val().trim().length != 11 || !patt.test($("#phone").val().trim()) ){
alert("手机号码格式不正确");
return false;
}
if( $("#company").val().trim().length==0 ){
alert("公司名称不能为空");
return false;
}
if( $("#inviter").val().trim() == "0" ){
alert("请选择邀请人");
return false;
}
var formData = new FormData($('#form1')[0]);
//var file = $('input[type="file"]').files[0]; //formData对象下的方法有些浏览器不支持，移动端设备浏览器支持也存在问题
//formData.append('photo', file);
//formData.append('name', $("#name").val().trim());
//formData.append('position', $("#position").val().trim());
//formData.append('phone', $("#phone").val().trim());
//formData.append('company', $("#company").val().trim());
//formData.append('inviter', $("#inviter").val().trim());
//console.log(formData.get('file'));
$.ajax({
url: 'signup.php?act=reg',
type: 'POST',
cache: false,
data: formData,
dataType: 'json',
async: false, //同步
processData: false, //不需要对数据做任何预处理 true 会自动对form表单序列化处理 data: $('#form1')[0].serialize()
contentType: false, //不设置数据格式 如果contentType: true, 则提交数据的格式会自动变成application/x-www-form-urlencoded，后台接收不到$_FILES参数；文件上传，表单enctype="multipart/form-data"
beforeSend: function () {
$("#submit").val('正在提交...');
$("#submit").prop('disabled','disabled');
},
complete: function () {
$("#submit").val('立即报名');
$("#submit").removeAttr("disabled");
}
}).success(function(res) {
if(res.code != "0000"){
console.log(res.msg);
}else{
$('#form1')[0].reset();
}
alert(res.msg);
}).fail(function(res) {
console.log(res)
});
}
</script>
</body>
</html>
php代码
<?php
header('Content-Type:application/json; charset=utf-8');
function getrandstr(){
$str='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890';
$randStr = str_shuffle($str);//打乱字符串
$rands= substr($randStr,0,6);//substr(string,start,length);返回字符串的一部分
return $rands;
} $db_config = require 'config/db.php';
$con = mysql_connect($db_config['host'], $db_config['user'], $db_config['passwd']);
if (!$con)
{
$return = array(
'code' => 1001,
'msg' => '数据库连接失败'
);
echo json_encode($return);
exit();
} mysql_select_db($db_config['db'], $con);
mysql_query("set names utf8"); if(isset($_GET['act']) && $_GET['act']=='reg'){
$name = trim($_POST['name']);
$position = trim($_POST['position']);
$phone = trim($_POST['phone']);
$company = trim($_POST['company']);
$inviter = trim($_POST['inviter']);
$photo = '';
$ctime = date('Y-m-d H:i:s');
$sql = " SELECT * FROM `user` WHERE `phone` = '{$phone}' ";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
if(empty($name) || mb_strlen($name,'utf8')>20){
$return = array(
'code' => 1003,
'msg' => '姓名格式不正确'
);
echo json_encode($return);
exit();
}
if(!preg_match('/^1\d{10}$/', $phone)){
$return = array(
'code' => 1004,
'msg' => '手机号码格式不正确'
);
echo json_encode($return);
exit();
}
if(empty($company) || mb_strlen($company,'utf8')>20){
$return = array(
'code' => 1005,
'msg' => '公司格式不正确'
);
echo json_encode($return);
exit();
}
if(empty($inviter) || mb_strlen($inviter,'utf8')>20){
$return = array(
'code' => 1006,
'msg' => '邀请人格式不正确'
);
echo json_encode($return);
exit();
}
if($row){
$return = array(
'code' => 1007,
'msg' => $phone.' 手机号码硬件注册'
);
echo json_encode($return);
exit();
}
if ((($_FILES["photo"]["type"] == "image/gif")
|| ($_FILES["photo"]["type"] == "image/jpeg")
|| ($_FILES["photo"]["type"] == "image/pjpeg")
|| ($_FILES["photo"]["type"] == "image/png"))
&& ($_FILES["photo"]["size"] < 10 * 1024 * 1024))
{
if ($_FILES["photo"]["error"] <= 0)
{
$photo = getrandstr().'_'.strtotime('now').'.'.pathinfo($_FILES["photo"]["name"], PATHINFO_EXTENSION);
if (!file_exists("upload/" . $photo))
{
move_uploaded_file($_FILES["photo"]["tmp_name"], "upload/" . $photo);
}
}
}
if($photo){
$photo = 'http://112.74.168.224/signup/upload/'.$photo;
}
$sql = " INSERT INTO `user`(`name`,`position`, `phone`, `company`, `inviter`, `photo`, `checked`, `activity_id`, `ctime`)VALUES('{$name}', '{$position}', '{$phone}', '{$company}', '{$inviter}', '{$photo}', 0, 1, '{$ctime}') ";
mysql_query($sql);
mysql_close($con);
$return = array(
'code' => 0000,
'msg' => '资料提交成功!我们会尽快通过短信与您联系,感谢您的支持！',
'data' => array()
);
echo json_encode($return);
exit();
}else{
$url = "index.php";
header("Location: $url");
exit();
}
js对json的处理
JSON字符串：
var jsonStr = '{"name":"nikita", "password":"1111"}';
JSON对象：
var jsonObj = {"name":"nikita", "password":"1111"};
var last = JSON.stringify(jsonObj); //将JSON对象转化为JSON字符
JSON.parse(jsonStr); //可以将json字符串转换成json对象
eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号
注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。
JS FormData 文件异步提交的更多相关文章
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- jQuery.form.js jQuery ajax异步提交form
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...
- Jquery FormData文件异步上传 快速指南
网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...
- 使用AjaxFileUpload.js实现文件异步上�
ajax是无法提交文件的,所以在上传图片并预览的时候,我们常常使用Ifame的方法实现看似异步的效果.可是这样总不是非常方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们 ...
- asp.net 基于ajaxfileupload.js 实现文件异步上传
前台代码: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("") ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- JQuery中使用FormData异步提交数据和提交文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...
- jquery.form.js 使用以及问题（表单异步提交）
标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...
- ajax 异步 提交 含文件的表单
1.前言 需求是使用 jquery 的 ajax 异步提交表单,当然,不是简单的数据,而是包含文件数据的表单.于是我想到了 new FormData() 的用法, 可是仍然提交失败,原来是ajax的属 ...
随机推荐
- POJ 1330 Nearest Common Ancestors （dfs+ST在线算法）
详细讲解见:https://blog.csdn.net/liangzhaoyang1/article/details/52549822 zz:https://www.cnblogs.com/kuang ...
- uwsgi + nginx 部署python项目（二）
实现负载均衡 开启两个服务器,nginx负责分发请求到两个服务器,以减轻单个服务器负担. 配置uwsgi服务器 在a项目目录下生成uwsgi.ini文件,在b项目目录下生成uwsgi.ini文件,如何 ...
- 利用Flot作基于时间段的曲线图
Flot是一个可以用于绘制多种图表的开源的JS库,Flot本身的功能已经是基本可以满足日常的需要啦,更可喜的是Flot还有很多的插件可以使用,从而为我们提供更加强大的定制功能,本文在作图中使用的显示坐 ...
- express 实现我猜你喜欢功能
工具:利用cookie-parser中间件; 原理: 每次访问某一具体的文章,就表明可能客户端对这类文章感兴趣, 将这类文章的标签添加到cookie里,字段是like; 然后退回到含有 我猜你喜欢模块 ...
- 2019JS必看面试题
2019JS必看面试题:https://www.jianshu.com/p/f1f39d5b2a2e 1. javascript的typeof返回哪些数据类型. 答案:string,boolean,n ...
- 使用idea搭建SSH
一.新建项目 选中Spring strust2 hibernate 二.见项目根路径下的lib下的jar移动到WEB-INF下 移动 修改路径 在lib目录下导入[c3p0-0.9.5.2.jar]. ...
- abstract关键字及static关键字
抽象关键字abstract 抽象类 在类前加上关键字abstract可以将此类变成抽象类.抽象类不允许通过new关键字实例化,但是可一通过其子类向上转型为其创建实例. 抽象类可以有抽象方法,也可以没有 ...
- idea配置less自动编译
参考: idea配置less自动编译 1. 电脑安装node.js环境: window下直接上官网下载node.msi文件下载安装即可 安装完成后在命令行执行如下命令表明安装成功 npm -v nod ...
- 堆”,"栈","堆栈","队列"以及它们的区别
如果你学过数据结构,就一定会遇到“堆”,"栈","堆栈","队列",而最关键的是这些到底是什么意思?最关键的是即使你去面试,这些都还会问到, ...
- STL: HDU1004Let the Balloon Rise
Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...