JavaScript는 수신을 위해 백그라운드로 파일 업로드를 구현합니다.

WordPress 백그라운드 관리의 플러그인 관리 인터페이스에서 새로 고침 없이 Ajax 업로드를 추가하고 싶습니다. 먼저 아이디어에 대해 말씀드리겠습니다. 파일을 업로드하려면 현재 파일의 데이터 스트림을 얻어야 합니다. 그런 다음 ajax post를 통해 처리하기 위해 서버로 보냅니다.

(1) 현재 파일의 데이터 스트림을 가져오는 방법은 무엇입니까?

답변: FormData()에 의해 인스턴스화된 개체를 통해 변수에 파일 데이터를 추가합니다.

(2) 데이터를 얻는 방법은 무엇입니까?

답변: 파일 유형의 입력 양식에는 파일 속성이 함께 제공됩니다.

HTML 페이지가 파일 업로드 요청을 보냅니다.

	<input type="file" name="upload_img" id=&#39;upload_img&#39;/>
	<img src="" id=&#39;myfile_img&#39; alt=&#39;&#39; title=&#39;&#39; width=&#39;300&#39;/> 
	<script type="text/javascript">
	
	var uploadImg = document.getElementById(&#39;upload_img&#39;);
	var myfileImg = document.getElementById(&#39;myfile_img&#39;);

	uploadImg.onchange = function()
	{
		var imgName = this.files[0].name;
		//let reader = new FileReader();
		var fordata = new FormData();
		fordata.append(&#39;my_file&#39;,this.files[0]);
		
		//向服务器发送文件数据
		ajaxPost(fordata,function(obj){

			var content = JSON.parse(obj.response);
			console.log(content);
			if(content.status == &#39;sucess&#39;){
				myfileImg.src = &#39;./images/&#39;+imgName;
			}
		});

	}

	function ajaxPost(data,fn)
	{
		var xhr = new XMLHttpRequest();
		xhr.open(&#39;post&#39;,&#39;./upload.php&#39;,&#39;true&#39;);
		xhr.send(data);
		xhr.onload = function()
		{
			fn(this);
		} 
	}
	</script>

서버가 파일 데이터를 처리하고 업로드된 파일을 생성합니다.

$success = array('status' => 'sucess', 'code' => '1');
$error = array('status' => 'error', 'code' => '0');

if (!empty($_FILES)) {
    $file = $_FILES['my_file'];

    $new_file_dir = dirname(__FILE__) . '/images/' . $file['name'];
    @move_uploaded_file($file['tmp_name'], $new_file_dir);

    exit(json_encode($success));
} else {
    exit(json_encode($error));
}

관련 권장 사항:

새로 고침 없이 업로드된 파일을 구현하는 JavaScript 방법 소개

위 내용은 JavaScript는 수신을 위해 백그라운드로 파일 업로드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!