집 > 기사 > 백엔드 개발 > 비동기 파일 또는 이미지 업로드 기능의 Ajax 구현 공유 예

비동기 파일 또는 이미지 업로드 기능의 Ajax 구현 공유 예

小云云원래의: 2018-01-08 13:37:051448검색

이 글은 ajax의 비동기 파일(사진) 업로드 기능을 중심으로 모두에게 자세하게 소개하고 있으니 관심있는 친구들이 참고하시면 좋을 것 같습니다.

우리 모두 알고 있듯이 요즘 대부분의 주요 웹사이트에는 기본적으로 파일 업로드 기능이 있습니다. 사용자는 좋아하는 사진이나 기타 파일을 나중에 쉽게 찾을 수 있도록 온라인에 저장할 수 있습니다. 하지만 웹의 파일 업로드 기능은 정확히 무엇입니까? 페이지는 어떻게 설정하나요? 오늘은 파일 업로드 기능의 구체적인 단계를 보여주기 위해 이미지 업로드를 예로 들어보겠습니다.

실제로 파일을 업로드하는 방법에는 두 가지가 있습니다. 하나는 양식 제출 제출이고 다른 하나는 비동기 제출을 구현하는 ajax입니다. 그러나 양식 양식 제출의 문제점은 업로드할 때마다 인터페이스가 새로 고쳐진다는 것입니다. 완료되어 비동기 업로드가 불가능하므로 이제 거의 모든 웹사이트가 ajax 비동기 업로드를 사용합니다. 이제 ajax 비동기 업로드를 구현하는 방법을 보여드리겠습니다.

먼저 양식 양식을 생성하면 코드는 다음과 같습니다.

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

생성이 완료된 후 먼저 이 웹사이트에서 사용자가 업로드한 이미지 정보를 가져와야 합니다. 코드는 다음과 같습니다. 다음과 같습니다

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(&#39;file&#39;,fileObj);

여기서 formData는 지금 파일 정보를 저장하려는 객체입니다. 그런 다음 ajax 요청을 사용하여 이를 백그라운드에 제출해야 합니다.

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

그런 다음 요청이 성공한 후 배경은 해당 처리를 수행하고 이미지를 지정된 폴더에 저장해야 합니다. 해당 PHP는 다음 작업을 완료해야 합니다.

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

이렇게 하면 즐겨찾는 파일 업로드 단계가 모두 완료되었습니다. 이 코드가 도움이 되기를 바랍니다.

첨부 파일: 파일 업로드 시 기타 정보를 첨부해야 하는 경우 프런트 엔드 페이지 요청이 완료된 후에 이 코드만 추가하면 됩니다.

//完成form表单数据的提交
 $(&#39;#btn&#39;).on(&#39;click&#39;,function(){
//  serializeArray()将form表单控件中的数据序列化成数组,数组中含有若干对象,对象包含对应控件的name和value
  var infor = $(&#39;#form&#39;).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);
  }
  });
 });

비동기 파일 또는 이미지 업로드 기능의 Ajax 구현 공유 예

관련 기사