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的属 ...
随机推荐
- HDU4372(第一类斯特林数)
题意:N座高楼,高度均不同且为1~N中的数,从前向后看能看到F个,从后向前看能看到B个,问有多少种可能的排列数. 0 < N, F, B <= 2000 首先我们知道一个结论:n的环排列的 ...
- k8s/02中文文档学习笔记
k8s中文文档 一.k8s概述 Kubernetes:是一个开源的,用于管理云平台中多个主机上的容器化的应用 k8s设计目标:让部署容器化的应用简单并且高效 大规模容器集群管理工具,从Borg到Kub ...
- 20191127 Spring Boot官方文档学习（5）
5.Spring Boot Actuator:可投入生产的功能 Spring Boot包含许多其他功能,可帮助您在将应用程序投入生产时监控和管理您的应用程序.您可以选择使用HTTP端点或JMX管理和监 ...
- 【Linux内核】编译与配置内核(arm)
ARM平台使用的内核 (1)清除原有的配置与中间文件 make distclean(2)配置内核 make menuconfig ARCH=arm(3)编译内核 make uImage ARCH=ar ...
- 【监控笔记】【1.3】监控事件系列——SQL Trace（黑盒跟踪 BlackBox Trace)
[1]它跟踪了哪些事件? (1.1)存储过程执行(SP:Strating) (1.2)T-SQL执行(SQL:BatchString) (1.3)错误和警告(Exception,Attention) ...
- JS中创建10个a标签，点击弹出对应的序号
<script type="text/javascript"> for(var i=0;i<10;i++){ (function(i){ var a=docume ...
- MyBatis二级缓存的笔记及记录
一.什么是二级缓存: 由于一级缓存是一次性的.临时的:每个会话都会创建一个新的:多个会话之间是不能共享的: 二级缓存用于解决一级缓存的不足:每一个“namespace”都会对应一个二级缓存:执行查询的 ...
- homestead修改php版本
登录后 如果之前没有设置过root密码 sudo passwd root 以root 权限执行如下命令,选择对应php版本 # 查看所有 php 版本和当前版本 update-alternatives ...
- Redis的配置与数据类型
redis window系统的redis是微软团队根据官方的linux版本高仿的 官方原版: https://redis.io/ 中文官网:http://www.redis.cn 1. redis下载 ...
- 使用NPOI读取Excel数据并写入SQLite
首先,我们来建一个数据库,我们就叫Hello.db(不一定是db后缀,你可以sqlite,sqlite3,db3)都可以作为识别,然后往里面建一个空的表格,如下图所示 然后建一个Excel表格,往表格 ...