JavaScript implémente le téléchargement de fichiers en arrière-plan pour la réception-js tutoriel-php.cn

JavaScript implémente le téléchargement de fichiers en arrière-plan pour la réception

小云云

Libérer： 2018-05-19 13:36:29

original

4915 Les gens l'ont consulté

Dans l'interface de gestion des plug-ins de la gestion en arrière-plan de WordPress, je souhaite ajouter un téléchargement ajax sans rafraîchir Permettez-moi d'abord de parler de l'idée : pour télécharger un fichier, vous devez obtenir. le flux de données du fichier actuel, puis passez La méthode post ajax est envoyée au serveur pour traitement.

(1) Comment obtenir le flux de données du fichier actuel ?

Réponse : Ajouter les données du fichier dans une variable via l'objet instancié par FormData()

(2) Comment obtenir les données ?

Réponse : Dans le formulaire de saisie de type file, il est livré avec un attribut files.

La page HTML envoie une demande de téléchargement de fichier :

	<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>

Copier après la connexion

Le serveur traite les données du fichier et génère le fichier téléchargé :

$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));
}

Copier après la connexion

Recommandations associées :

Introduction à la méthode de téléchargement de fichiers sans actualisation à l'aide de JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!