Ajax implementiert die asynchrone Datei- oder Bild-Upload-Funktion

Dieser Artikel stellt hauptsächlich die asynchrone Datei-(Bild-)Upload-Funktion von Ajax vor. Er hat einen gewissen Referenzwert.

Hallo zusammen, diesen Artikel möchte ich mit euch teilen Der Code einer Funktion zum Hochladen von Webseitendateien. Ich hoffe, Sie können mir einen Hinweis geben oder mir einige Vorschläge machen.

Wie wir alle wissen, verfügen die meisten großen Websites heutzutage grundsätzlich über eine Datei-Upload-Funktion. Benutzer können ihre Lieblingsbilder oder andere Dateien online speichern, damit sie bei späterer Verwendung einer Datei leicht gefunden werden können Seite Wie richte ich die Upload-Funktion ein? Heute nehme ich das Hochladen von Bildern als Beispiel, um Ihnen die spezifischen Schritte der Datei-Upload-Funktion zu zeigen.

Tatsächlich gibt es zwei Möglichkeiten, Dateien hochzuladen: eine über die Formularübermittlung und die andere über die asynchrone Übermittlung über Ajax. Bei der Formularübermittlung gibt es jedoch ein Problem Sobald der Upload abgeschlossen ist, kann der asynchrone Upload nicht implementiert werden, sodass jetzt fast alle Websites den asynchronen Ajax-Upload verwenden.

Zuerst erstelle ich ein Formular, der Code lautet wie folgt:

 <form action="" id="form">
  用户名：<input type="text" name="user"/></br>
  密码：<input type="password" name="pass" /></br>
  性别：<input type="radio" name="sex" value="男"/>男
   <input type="radio" name="sex" value="女"/>女
  头像：<input type="file" id="file" name="file"/></br>
  <button id="btn" type="button">提交</button>
 </form>
 <p class="con"></p>

Nachdem die Erstellung abgeschlossen ist, zuerst Wir müssen Um die Informationen über die vom Benutzer von dieser Website hochgeladenen Bilder zu erhalten, lautet der Code wie folgt

var imgs=[];//存储图片链接
 //为文件上传添加change事件
 var fileM=document.querySelector("#file");
 $("#file").on("change",function(){
  console.log(fileM.files);
  //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
  var fileObj=fileM.files[0];
  //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
  var formData=new FormData();
  formData.append('file',fileObj);

Die formData hier ist das Objekt, das wir wollen um die Dateiinformationen jetzt zu speichern, und dann müssen wir es tun. Es verwendet eine Ajax-Anfrage, um sie an den Hintergrund zu senden:

  //创建ajax对象
  var ajax=new XMLHttpRequest();
  //发送POST请求
  ajax.open("POST","http://localhost/phpClass/file-upload/move_file.php",true);
  ajax.send(formData);
  ajax.onreadystatechange=function(){
  if (ajax.readyState == 4) {
   if (ajax.status>=200 &&ajax.status<300||ajax.status==304) {
   console.log(ajax.responseText);
   var obj=JSON.parse(ajax.responseText);
   alert(obj.msg);
   if(obj.err == 0){、
    //上传成功后自动动创建img标签放在指定位置
    var img =$("<img src=&#39;"+obj.msg+"&#39; alt=&#39;&#39; />");
    $(".con").append(img);
    imgs.push(obj.msg);
   }else{
    alert(obj.msg);
   }
   }
  }
  }
 });

Dann, nachdem unsere Anfrage erfolgreich war, Der Hintergrund muss damit umgehen und das Bild im angegebenen Ordner speichern, sodass das entsprechende PHP diese Vorgänge ausführen sollte:

<?php
//解决跨域问题
header("Access-Control-Allow-Origin:*");
//说明向前台返回的数据类型为JSON
header("Content-type:text/json");
//$_FILES超全局变量存储是文件数据，是一个关联数组
 $fileObj=$_FILES[&#39;file&#39;];
 var_dump($fileObj);
 if($fileObj["error"]==0){
 //判断文件是否合法
 $types=["jpg","jpeg","png","gif"];
 $type = explode("/", $fileObj["type"])[1];
 if(in_array($type, $types)){
  $time = time();//获取时间戳 返回一个整形
  //获取文件详细路径
  $filePath="http://localhost/phpClass/image1".$time.".".$type;
  echo $filePath;
  //移动文件
  $res=move_uploaded_file($fileObj["tmp_name"],"../image1/".$time.".".$type);
  if($res){
  $infor=array("err"=>0,"msg"=>"文件移动成功");
  }else{
  $infor=array("err"=>1,"msg"=>"文件移动失败");
  }
 }else{
  $infor=array("err"=>1,"msg"=>"文件格式不合法");
 }
 echo json_encode($infor);
 }
?>

Auf diese Weise haben wir Ich habe alle Schritte zum Hochladen der Datei abgeschlossen. Wenn Sie Ihre Lieblingsbilder hochladen möchten, laden Sie sie auf Ihre eigene Webseite hoch. Ich hoffe, dieser Code kann Ihnen helfen!

Anhang: Wenn Sie beim Hochladen einer Datei weitere Informationen über sich selbst anhängen müssen, müssen Sie diesen Code erst hinzufügen, nachdem die Frontend-Seitenanforderung abgeschlossen ist:

//完成form表单数据的提交
 $('#btn').on('click',function(){
//  serializeArray()将form表单控件中的数据序列化成数组,数组中含有若干对象,对象包含对应控件的name和value
  var infor = $('#form').serializeArray();
//  console.log(infor);
  var stu = {};
  for (var i=0;i<infor.length;i++) {
  var obj=infor[i];
  stu[obj.name] = obj.value;
  }
  stu["imgs"] = imgs;
  stu["imgs"] = imgs[0];

  //发送ajax请求
  $.ajax({
  url:"http://localhost/phpClass/file-upload/data.php",
  data:{
   parameter :JSON.stringify(stu)
  },
  success:function(res){
   console.log(res.msg);
  }
  });
 });

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

AJAX wird verwendet, um festzustellen, ob der Benutzer registriert ist

Lösen Sie den Parsererror-Fehler unter Ajax perfekt domänenübergreifende Anfrage

Lösung für das Problem verstümmelter Fragezeichen auf Chinesisch bei der Verwendung von Ajax zur Weitergabe von JSON an die Rezeption

Das obige ist der detaillierte Inhalt vonAjax implementiert die asynchrone Datei- oder Bild-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!