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的属 ...
随机推荐
- centos 7 无网络情况下，解决yum 安装依赖rpm包
方法一:在一台有网络的机器,用yum下载好所需程序,传到另外一台网络的机器上安装 yum install xtrabackup --downloadonly --downloaddir=/rpmpat ...
- P1177快速排序
这是一个快速排序的模板题.拿到题后便写了quicksort(确定一个基准数,利用两个哨兵,把大的放右边,小的放左边,再递归实现排序),但是竟然TLE了60pts(???),于是翻看dalao们的题解, ...
- 不能将X*类型的值分配到X*类型的实体问题的解决方法
今天在学习链表的过程中遇到了这个问题,我用如下方法定义了一个结构体,然后这个函数想要在链表头插入一个节点.但是在函数的最后一行却出现了报错:不能将MyLinkedList * 类型的值分配到MyLin ...
- Django、Flask、Tornado的区别？
Django:Python 界最全能的 web 开发框架,battery-include 各种功能完备,可维护性和开发速度一级棒.常有人说 Django 慢,其实主要慢在 Django ORM 与数据 ...
- GitHub入门使用
1.首先注册账号. 2.新建仓库. 3.安装GitBash 4.首先要在本地创建一个ssh key. $ ssh -keygen -t rsa -C "your email@.com&quo ...
- 剑指offer 分行从上到下打印二叉树
题目: 从上到下按层打印二叉树,同一层的节点按照从左到右的顺序打印,每一层打印到一行. /* struct TreeNode { int val; struct TreeNode *left; str ...
- 剑指offer 删除链表的节点
给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间内删除该节点. struct ListNode { int val; ListNode *next; }; void DeleteNode ...
- Java中实现多态的条件是什么
java中实现多态需要三个条件: 1,需要有继承关系的存在. 2,需要有方法的重写. 3,需要有父类的引用指向子类对象.
- VB中preserve的用法
注:本文转载自:http://zhidao.baidu.com/question/161401549.html ReDim 语句用来定义或重定义原来已经用带空圆括号(没有维数下标)的 Private. ...
- VB Open 函数详解 打开、关闭、读、写文件
(一)打开和关闭文件 1.顺序文件 打开顺序文件,我们可以使用Open语句.它的格式如下:Open pathname For [Input |Output |Append] As [ ...