ajax implements asynchronous file or image upload function

This article mainly introduces the asynchronous file (picture) upload function of ajax to everyone in detail. It has certain reference value. Interested friends can refer to it.

Hello everyone, this article I I want to share with you the code of a web page file upload function. I hope you can have some reference or give me some suggestions.

As we all know, most major websites nowadays basically have a file upload function. Users can save their favorite pictures or other files online so that they can be easily found when they are used in the future. But the files of a web page How to set up the upload function? Today I will take image upload as an example to show you the specific steps of the file upload function.

In fact, there are two ways to upload files, one is from form submit submission, and the other is asynchronous submission through ajax. However, a problem with form form submission is that the interface will be refreshed every time the upload is completed, which cannot be implemented. Asynchronous upload, so now almost all websites use ajax asynchronous upload. Now I will show you how to implement ajax asynchronous upload.

First I create a form form, the code is as follows:

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

After the creation is completed, first we have to To get the information about the pictures uploaded by the user from this site, the code is as follows

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

The formData here is the object we want to store the file information now, and then we need to It uses an ajax request to submit it to the background:

  //创建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);
   }
   }
  }
  }
 });

Then after our request is successful, the background must handle it accordingly and save the image to the specified file. folder, so the corresponding PHP should complete these operations:

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

In this way we have completed all the steps of file upload, if you want to upload your favorite pictures , upload it to your own web page, I hope this code can help you!

Attachment: If you need to attach other information about yourself when uploading a file, you only need to add this code after the front-end page request is completed:

//完成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);
  }
  });
 });

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

AJAX is used to determine whether the user is registered

Perfectly solves the parsererror error under ajax cross-domain request

Solution to the problem of garbled question marks in Chinese when using ajax to pass json to the front desk

The above is the detailed content of ajax implements asynchronous file or image upload function. For more information, please follow other related articles on the PHP Chinese website!