Rumah  >  Artikel  >  hujung hadapan web  >  javascript实现上传文件到后台接收

javascript实现上传文件到后台接收

小云云
小云云asal
2018-05-19 13:36:294952semak imbas

在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(&#39;status&#39; => &#39;sucess&#39;, &#39;code&#39; => &#39;1&#39;);
$error = array(&#39;status&#39; => &#39;error&#39;, &#39;code&#39; => &#39;0&#39;);

if (!empty($_FILES)) {
    $file = $_FILES[&#39;my_file&#39;];

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

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

相关推荐:

JavaScript实现不刷新上传文件的方法介绍

Atas ialah kandungan terperinci javascript实现上传文件到后台接收. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn