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的属 ...
随机推荐
- Linux基本服务
一.Samba服务 1.下载samba yum install samba -y 2.配置samba文件 vim /etc/samba/smb.conf [ken]path = /test #等 ...
- xmake v2.2.9 发布, 新增c++20 modules的实验性支持
这个版本没啥太大新特性,主要对c++20 modules进行了实验性支持,目前支持clang/msvc编译器,除此之外改进了不少使用体验,并且提高了一些稳定性. 另外,这个版本新增了socket.io ...
- dajngo ORM查询中select_related的作用，博客主题的定制，从数据库中按照年月筛选时间
1.dajngo ORM查询中select_related的作用 select_related()方法一次性的把数据库关联的对象都查询出来放入对象中,再次查询时就不需要再连接数据库,节省了后面查询数据 ...
- ubuntu系统更新命令
一.图形界面更新升级 1.点击”系统设置“,打开“软件和更新”,切到“更新”栏目进行更新设置. 2.可以通过软件更新器进行更新升级自己想要更新的 二.命令方式更新升级 1.先解锁 ps -e|grep ...
- css实现斑马线效果
文本实现斑马线效果 <style> p { font-size: 17px; line-height: 25px; background-color: antiquewhite; back ...
- /etc/nscd.conf - 域名服务缓存守护进程配置文件
描述 DESCRIPTION 该文件 /etc/nscd.conf 在启动 nscd(8) 时读入.每一行或者指定一个属性和值,或者指定一个属性.服务和一个值.域之间通过空格或者TAB分开.‘#’表示 ...
- Comet OJ - Contest #5 D 迫真小游戏 (堆+set)
迫真小游戏 已经提交 已经通过 时间限制:2000ms 内存限制:256MB 73.98% 提交人数:196 通过人数:145 题目描述 H君喜欢在阳台晒太阳,闲暇之余他会玩一些塔防小游戏. H君玩的 ...
- 计蒜客 蓝桥模拟 A. 结果填空：矩阵求和
给你一个从 n×nn \times nn×n 的矩阵,里面填充 111 到 n×nn \times nn×n .例如当 nnn 等于 333 的时候,填充的矩阵如下. 1 1 2 3 2 4 5 ...
- eclipse多个项目提交到同一个仓库(码云)
参考博客:Eclipse提交多个项目到同一个仓库 https://blog.csdn.net/qq_30764991/article/details/80379365 步骤一:码云建立个远程仓库 步骤 ...
- GUI学习之二十九—QInputDialog学习总结
最后一种对话框是QInputDialog,,用来提供个输入的窗口. 一常用的静态方法 由于输入的类型不同,QInputDialog分为多种静态方法使用 #有步长调节器的整形数据,step为步长调节器的 ...