這篇文章主要介紹了前端使用formdata異步上傳form表單,以及後台(php)獲取的詳細教程,親測可用.(附要源碼),有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
前端如果要異步提交一個表單那麼,使用formdata方法提交是不錯的選擇.因為formdata可以將整個表單都提交包括提交表單中的
文件(這個是重點,很多其他方式不能完成).
前端的關鍵部分程式碼如下:
<form id="form" method="post" enctype="multipart/form-data"> <input type="text" name="name" /> <input type="file" name=img /> <input type="button" onclick="submit()"/> </form> <script> function submit(){ var myform = document.getElementById("form") var formfile = new FormData(myform); var author = ["sony", "god", "JB"]; formfile.append("author", author); //此处是在原表单上在增加一些字段, 后端用$_POST["author"]就可以取得相应的值 var xml = new XMLHttpRequest(); xml.onreadystatechange = function(){ if(xml.readyState == 4 && xml.status == 200){ var result = JSON.parse(xml.responseText); console.log(result) //在打印台就可以看到相应的表单值 } } xml.open("POST", "你要提交到那个服务器地址", true); xml.send( formfile ); } </script>
在後台使用php,其他的語言可以參考思路是一樣的 get.php
<?php $name = $_POST["name"]; $author = $_POST['author"]; $file = $_FILES["img"]; move_uploaded_file($file['tmp_name'], $file["name"]); //上传到和get.php同一级目录的服务器上 //至此,前端异步上传的name 和author 和 img 都已经取到.后续可以根据自己的需要去做其他事情 ?>
遇到的坑:
如form.file.append("author", author)可以額外增加自己想要上傳的值,但是author 數值和陣列和字串親測可用,但是如果你是想要增加個表單那是不行如formfile.append("form", form) 在後台$_POST["form"]得到是fromElementobject
以上是前端使用formdata非同步上傳form表單,以及後台(php)取得的詳細教學,親測可用.(附要原始碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!