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的属 ...
随机推荐
- IIS7下配置web.config隐藏index.php
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...
- Bean的构造器注入和setter注入
链接:https://pan.baidu.com/s/1vixLrr8harzZMwLsIB1Mwg 提取码:ou1n 首先要明白,为什么要注入? IOC容器会在初始化时,创建好所有的bean对象的实 ...
- CentOS7创建本地源过程
1)使用yum安装http服务(主节点) yum -y install httpd 2)将httpd服务加入系统自启动服务并设置开机启动 systemctl start httpd #启动apache ...
- make the fence great again(dp 二维)
D. Make The Fence Great Again time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- [BZOJ 3509] [CodeChef] COUNTARI (FFT+分块)
[BZOJ 3509] [CodeChef] COUNTARI (FFT+分块) 题面 给出一个长度为n的数组,问有多少三元组\((i,j,k)\)满足\(i<j<k,a_j-a_i=a_ ...
- HDU-1018 BigNumber
Big Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- 异步IO\数据库\队列\缓存\RabbitMQ队列
本节内容 Gevent协程 Select\Poll\Epoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 Redis\Memcached缓存 Paramiko SS ...
- 通过编写串口助手工具学习MFC过程——（七）添加Tab Control控件
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- vscode学习（三）之如何修改打开终端的默认shell
实现 第一步:打开VSCode的设置(Preferences>User Settings) 第二步:搜索terminal.integrated.shell.osx 的 并把它的值改为你的zsh安 ...
- IDEA创建maven的web项目时，main文件夹下没有java，resources目录等源文件夹
https://blog.csdn.net/qq_34377273/article/details/83183307