JavaScript implementiert das Hochladen von Dateien zum Empfang in den Hintergrund

In der Plug-in-Verwaltungsoberfläche der WordPress-Hintergrundverwaltung möchte ich einen Ajax-Upload ohne Aktualisierung hinzufügen Lassen Sie mich zunächst über die Idee sprechen: Um eine Datei hochzuladen, müssen Sie sie herunterladen den Datenstrom der aktuellen Datei und dann übergeben Die Ajax-Post-Methode wird zur Verarbeitung an den Server gesendet.

(1) Wie erhalte ich den Datenstrom der aktuellen Datei?

Antwort: Hängen Sie die Dateidaten in einer Variablen über das von FormData() instanziierte Objekt an

(2) Wie erhält man die Daten?

Antwort: Im Eingabeformular mit dem Typ „Datei“ ist ein Dateiattribut enthalten.

HTML-Seite sendet eine Datei-Upload-Anfrage:

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

Der Server verarbeitet die Dateidaten und generiert die hochgeladene Datei:

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

Verwandte Empfehlungen:

Einführung in die Methode zum Hochladen von Dateien ohne Aktualisierung mithilfe von JavaScript

Das obige ist der detaillierte Inhalt vonJavaScript implementiert das Hochladen von Dateien zum Empfang in den Hintergrund. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!