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">&nbsp;*</font><br/>
职  位:<input class="input1" id="position"  name="position" type="text" maxlength="20" placeholder="" value="" />&nbsp;&nbsp;&nbsp;</font><br/>
手机号码:<input class="input1" id="phone"  name="phone" type="text" maxlength="11" placeholder="" value="" /><font color="red">&nbsp;*</font><br/>
公司名称:<input class="input1" id="company"  name="company" type="text" maxlength="20" placeholder="" value="" /><font color="red">&nbsp;*</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串中的表达式。

原文地址:https://www.cnblogs.com/hnhycnlc888/p/11741950.html

时间: 2024-08-24 06:10:08

JS FormData 文件异步提交的相关文章

使用AjaxFileUpload.js实现文件异步上传

ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

原生js实现ajax的文件异步提交功能、图片预览功能.实例

<%-- Created by IntelliJ IDEA. User: yh Date: 2016/12/14 Time: 17:13 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file=&

jQuery.form.js jQuery ajax异步提交form

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所有需要的事件监听器,为ajax提交表单做准备.ajaxForm并不能提交表单.在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备. 接受0个或1个参数.参数可以是一个回调函数,也可以是一个Options对象. $("#formid").ajaxForm(

Jquery FormData文件异步上传 快速指南

网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: [html] view plain copy print? <form id="fileUploadForm"> <input type="file" name="file" class="imageUpload"/> <span 

使用AjaxFileUpload.js实现文件异步上?

ajax是无法提交文件的,所以在上传图片并预览的时候,我们常常使用Ifame的方法实现看似异步的效果.可是这样总不是非常方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: <input type="file" name="upload" hidden="hidden" id="file_upload"

asp.net 基于ajaxfileupload.js 实现文件异步上传

前台代码: /*修改头像*/ //上传 function _sc() { $(".ckfile").html("").css("color", "#535353"); $("#_userImgPath").val(""); var str = $("#file").val(); if ($.trim(str) == "") { $(".c

JQuery中使用FormData异步提交数据和提交文件

web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的.异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处.我们这里使用JQuery中封装好的ajax函数,更加简便.下面列举几个使用ajax异步提交数据的方

.Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存,并返回保存的图片路径展示出图片,实现一个无刷新的异步图片上传的过程,当然这里我讲解的是单张图片的保存过程,对于多图片上传的话其实我们只需要在type='file'文本框中加上一个multiple可多选,然后获取input中的文件数组遍历向后台提交感兴趣的话可以尝试,不过下一篇博客将会讲解如何使用L

【原创】AJAX上传文件,formdata表单提交问题

今天遇到一个特别神奇的问题,AJAX上传文件,formdata表单提交问题,后台显示无法获取上传文件. 排查许久发现是formdata.append();时,要先添加file,而后添加其他参数.方可正常工作. 可是却不知到底是和原因.去了火狐开发者社区也未能找到答案. 还望知道的大神赐教一二.