집 >웹 프론트엔드 >JS 튜토리얼 >Ajax를 사용하여 파일과 이미지를 비동기식으로 업로드하는 방법

Ajax를 사용하여 파일과 이미지를 비동기식으로 업로드하는 방법

php中世界最好的语言원래의: 2018-04-25 14:28:321455검색

이번에는 ajax를 사용하여 파일과 사진을 비동기적으로 업로드하는 방법을 보여드리겠습니다. 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('file',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表单数据的提交
 $('#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);
  }
  });
 });

이 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 기사 등 정말 흥미롭습니다. PHP 중국어 웹사이트의 다른 관련 기사에도 주목해 주세요!