H5 FormData 配和 Ajax上载文件 [jQuery篇]

FormData配和jQuery Ajax上载文件:

参考文档：

1. HTML5 FormData 方法介绍以及实现文件上传 -CSDN;

2. 使用FormData对象提交表单及上传图片 -CSDN;

3. FormData 对象的使用 -Mozilla [MDN];

1. Style样式文件 : 可忽略,我是为了看起来顺眼。

<style type="text/css">
/*样式文件,[可选]*/
*{padding: 0; margin: 0; list-style: none; text-decoration: none}
#area{margin: 0 auto; border: solid 1px #000; width: 360px; padding: 12px; min-height: 140px; margin-top: 14%;}
#area [type="button"]{padding: 4px 8px; float: right; cursor: pointer;}
#area p{padding: 4px 0;}
</style>

2. Html表单代码 :

<div id="area">
<form name="form1" id="form1" >
    <p>Name: <input type="text" name="name" value="达尔文" /></p>
    <p>Gender: <input type="radio" name="gender" value="1" checked /> male
                <input type="radio" name="gender" value="2" /> female
    </p>
    <p>stu-number: <input type="text" name="sumber" value="007" /> </p>
    <p>photo: <input type="file" name="photo" id="photo" /></p>
    <p><input type="button" value="submit" onclick="fsubmit()"/></p>
</form>
    <div id="result"></div>
</div>

3. jQuery代码：

<script src="../jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
/* 1.记得引入jQuery文件;
 * 2.另外一件事是: 如果jQuery版本过低,比如我的1.3 。。。可能会上传发生失败的。 */

function fsubmit(){
    var form = document.getElementById("form1");
    var fd = new FormData(form);
    $.ajax({
        type:"POST",
        url:"test2server.php",
        data: fd,
        processData: false,
        contentType: false,
        success:function(response,status,xhr){
            console.log(xhr);
            var json = $.parseJSON(response);
            var result ='';

            result += "个人信息：<br/>Name: "+json['name']+
                    "<br/>Gender: "+json['gender']+
                    "<br/>Number: "+json['number']+
                    '<img src="'+json['photo']+'" width="100">';
            $('#result').html(result);
        },
        async:true
    });

    return false;
}
</script>

*. Php代码的处理 :

<!-- server.php -->
<?php

    $name = isset($_POST['name'])?$_POST['name']:'';
    $gender = isset($_POST['gender'])?$_POST['gender']:'';
    $number = isset($_POST['number'])?$_POST['number']:'';

    $filename = time().substr($_FILES['photo']['name'],strrpos($_FILES['photo']['name'],'.'));
    $response =array();

    if(move_uploaded_file($_FILES['photo']['tmp_name'],$filename)){
        $response['isSuccess'] = true;
        $response['name'] = $name;
        $response['gender'] = $gender;
        $response['number'] = $number;
        $response['photo'] = $filename;
    }else{
        $response['isSuccess'] = false;
    }
echo json_encode($response);

?>

---

效 果 :

发布时间：Oct 17 2017，(14:09 PM);
修改：2018-5-1 Pm5:11;