프론트엔드는 formdata를 사용하여 양식 양식을 비동기식으로 업로드하며, 백엔드(php)에서 얻은 자세한 튜토리얼을 개인 테스트에 사용할 수 있습니다(소스 코드 첨부).

이 글에서는 양식 양식을 비동기적으로 업로드하기 위한 양식 데이터의 프런트엔드 사용과 개인 테스트에 사용할 수 있는 백엔드(php)에서 얻은 자세한 튜토리얼을 주로 소개합니다(소스 코드 첨부). 이제 도움이 필요한 모든 사람, 친구와 공유할 수 있습니다. 프런트 엔드에서 양식을 비동기적으로 제출하려는 경우 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[&#39;author"];
$file = $_FILES["img"];
move_uploaded_file($file[&#39;tmp_name&#39;], $file["name"]);  //上传到和get.php同一级目录的服务器上
//至此,前端异步上传的name 和author 和 img 都已经取到.后续可以根据自己的需要去做其他事情
?>

직면할 수 있는 함정:

예: form.file.append(" 작성자", 작성자)는 원하는 추가 값을 추가할 수 있습니다. 업로드하지만 작성자 값, 배열 및 문자열은 개인 테스트에 사용할 수 있지만 양식을 추가하려는 경우 formfile.append("form", form) 과 같이 작동하지 않습니다. 백그라운드에서 $_POST["form "] 는 Elementobject

에서 가져옵니다.

위 내용은 프론트엔드는 formdata를 사용하여 양식 양식을 비동기식으로 업로드하며, 백엔드(php)에서 얻은 자세한 튜토리얼을 개인 테스트에 사용할 수 있습니다(소스 코드 첨부).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!