집 >웹 프론트엔드 >JS 튜토리얼 >ajax는 비동기 파일 또는 이미지 업로드 기능을 구현합니다.

ajax는 비동기 파일 또는 이미지 업로드 기능을 구현합니다.

亚连원래의: 2018-05-23 10:04:241861검색

이 글에서는 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는 비동기 파일 또는 이미지 업로드 기능을 구현합니다.

관련 기사