首页 > web前端 > html教程 > 使用FormData提交表单及上传图片的方法

使用FormData提交表单及上传图片的方法

一个新手
发布: 2017-09-14 10:52:14
原创
2364 人浏览过

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。


使用FormData对象

1.创建一个FormData空对象,然后使用append方法添加key/value


  1. var formdata = new FormData();  

  2. formdata.append('name','fdipzone');  

  3. formdata.append('gender','male');  

2.取得form对象,作为参数传入到FormData对象

    <form name="form1" id="form1">  
    <input type="text" name="name" value="fdipzone">  
    <input type="text" name="gender" value="male">  
    </form>
登录后复制



  1. var form = document.getElementById(&#39;form1&#39;);  
    var formdata = new FormData(form);
    登录后复制

使用FormData提交表单及上传文件:


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    <html>  
     <head>  
      <meta http-equiv="content-type" content="text/html; charset=utf-8">  
      <title> FormData Demo </title>  
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>  
      
      <script type="text/javascript">  
      <!--  
        function fsubmit(){  
            var data = new FormData($(&#39;#form1&#39;)[0]);  
            $.ajax({  
                url: &#39;server.php&#39;,  
                type: &#39;POST&#39;,  
                data: data,  
                dataType: &#39;JSON&#39;,  
                cache: false,  
                processData: false,  
                contentType: false  
            }).done(function(ret){  
                if(ret[&#39;isSuccess&#39;]){  
                    var result = &#39;&#39;;  
                    result += &#39;name=&#39; + ret[&#39;name&#39;] + &#39;<br>&#39;;  
                    result += &#39;gender=&#39; + ret[&#39;gender&#39;] + &#39;<br>&#39;;  
                    result += &#39;<img src="&#39; + ret[&#39;photo&#39;]  + &#39;" width="100">&#39;;  
                    $(&#39;#result&#39;).html(result);  
                }else{  
                    alert(&#39;提交失敗&#39;);  
                }  
            });  
            return false;  
        }  
      -->  
      </script>  
      
     </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>  
        <p id="result"></p>  
     </body>  
    </html>
    登录后复制

server.php


  1. <?php  
    $name = isset($_POST[&#39;name&#39;])? $_POST[&#39;name&#39;] : &#39;&#39;;  
    $gender = isset($_POST[&#39;gender&#39;])? $_POST[&#39;gender&#39;] : &#39;&#39;;  
      
    $filename = time().substr($_FILES[&#39;photo&#39;][&#39;name&#39;], strrpos($_FILES[&#39;photo&#39;][&#39;name&#39;],&#39;.&#39;));  
      
    $response = array();  
      
    if(move_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;], $filename)){  
        $response[&#39;isSuccess&#39;] = true;  
        $response[&#39;name&#39;] = $name;  
        $response[&#39;gender&#39;] = $gender;  
        $response[&#39;photo&#39;] = $filename;  
    }else{  
        $response[&#39;isSuccess&#39;] = false;  
    }  
      
    echo json_encode($response);  
    ?>
    登录后复制



    以上是使用FormData提交表单及上传图片的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板