javascript實作上傳檔案到後台接收

在wordpress後台管理的插件管理介面，想添加一個ajax無刷新的上傳，#先說一下思路： 上傳文件，必需得取得當前的文件的資料流，然後透過ajax的post方式傳送給伺服器處理。

（1）如何取得目前檔案的資料流呢？

答：透過FormData()實例化的對象，將檔案資料append在一個變數裡面

（2）如何取得資料？

答案：在type為file的input表單中，自備一個files屬性。

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中文網其他相關文章！