FormData实现文件上传实例

时间：2022-03-29 17:29:48

单提交，文件上传是一个常用又十分麻烦的功能，以前要上传文件通常都是借助插件或者flash来实现，噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后，老板再也不用担心我的上传了。

FormData可以把它理解成一个虚拟的表单对象，它只有一个方法append，这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。

你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段，如下：var oMyForm = new FormData();

html+javascript代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>FormData</title>

</head>

<body>

    <form name="form1" id="form1">

        <p>name:<input type="text" name="name" ></p>

        <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>

        <p>photo:<input type="file" name="photo" id="photo"></p>

        <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>

    </form>

    <div id="result"></div>

</script>

    <script type="text/javascript">

        function fsubmit() {

            var form=document.getElementById("form1");

            var formData=new FormData(form);

            var oReq = new XMLHttpRequest();

            oReq.onreadystatechange=function(){

              if(oReq.readyState==4){

                if(oReq.status==200){

                    var json=JSON.parse(oReq.responseText);

                    var result = '';

                    // result += 'name=' + ret['name'] + '<br>';

                    // result += 'gender=' + ret['gender'] + '<br>';

                     result += '<img src="' + json['photo'] + '" width="100">';

                     document.getElementById('#result').innerHTML = result;

                }

              }

            }

            oReq.open("POST", "server.php");

            oReq.send(formData);

            return false;

        }

    </script>

</body>

</html>

//php代码

<?php

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

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

$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['photo'] = $filename;

}else{

    $response['isSuccess'] = false;

}

echo json_encode($response);

?>

PS:在用FromData发送数据时，input type="button" 不会被提交。因此如果php接收数据时，避免用button中的name值做来源判断。

相关文章