Exemple détaillé d'implémentation ajax de téléchargement de fichiers sans actualisation-tutoriel php-php.cn

Exemple détaillé d'implémentation ajax de téléchargement de fichiers sans actualisation

小云云

Libérer： 2023-03-18 06:02:01

original

1690 Les gens l'ont consulté

Cet article présente principalement en détail la fonction d'ajax pour télécharger des fichiers sans rafraîchir. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Le code détaillé est le suivant

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax无刷新上传文件</title>
<script>
window.onload = function(){
  var oBtn = document.getElementById(&#39;btn&#39;);
  var oMyFile = document.getElementById(&#39;myFile&#39;);

  oBtn.onclick = function() {
    //alert(oMyFile.value); //获取到的是file控件的value值,这个内容是显示给你看的文字,不是我们选择的文件

    //oMyFile.files file控件中选择的文件列表对象
    //alert(oMyFile.files);

    //我们是要通过ajax把oMyFile.files[0]数据发送给后端

    /*
    for (var attr in oMyFile.files[0]) {
      console.log( attr + &#39; : &#39; + oMyFile.files[0][attr] );
    }
    */

    //利用ajax发送必须要有一个ajax对象
    var xhr = new XMLHttpRequest();

    //监听上传事件
    xhr.onload = function(){
      //alert(1);
      //alert(this.responseText);//后端返回的数据
      var d = JSON.parse(this.responseText);

      alert(d.msg + &#39; : &#39; + d.url); //显示上传成功 并且显示文件路径
    }

    xhr.open(&#39;post&#39;,&#39;post_file.php&#39;,true); //open打开的方式不能使用get,上传文件的地址,使用异步上传
    //在使用post发送的时候必须要带一些请求头信息
    xhr.setRequestHeader(&#39;X-Request-With&#39;, &#39;XMLHttpRequest&#39;);
    //send要发送数据 
    //将要上传的数据转换成二进制数据
    //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据

    var oFormData = new FormData(); //通过FormData来构建提交数据
    oFormData.append(&#39;file&#39;,oMyFile.files[0]);

    xhr.send(oFormData);
  }
}
</script>
</head>
<body>
  <input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
</body>
</html>

Copier après la connexion

Code php backend post_file.php

<?php
header(&#39;Content-type:text/html; charset="utf-8"&#39;);
$upload_dir = &#39;uploads/&#39;;

if(strtolower($_SERVER[&#39;REQUEST_METHOD&#39;]) != &#39;post&#39;){
  exit_status(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;错误提交方式&#39;));
}

if(array_key_exists(&#39;file&#39;,$_FILES) && $_FILES[&#39;file&#39;][&#39;error&#39;] == 0 ){

  $pic = $_FILES[&#39;file&#39;];

  if(move_uploaded_file($pic[&#39;tmp_name&#39;], $upload_dir.$pic[&#39;name&#39;])){
    exit_status(array(&#39;code&#39;=>0,&#39;msg&#39;=>&#39;上传成功&#39;,&#39;url&#39;=>$upload_dir.$pic[&#39;name&#39;]));
  }
}
echo $_FILES[&#39;file&#39;][&#39;error&#39;];
exit_status(array(&#39;code&#39;=>1,&#39;msg&#39;=>&#39;出现了一些错误&#39;));

function exit_status($str){
  echo json_encode($str);
  exit;
}
?>

Copier après la connexion

Recommandations associées :

Fonction de prévisualisation d'image JavaScript pour obtenir un téléchargement sans actualisation

AJAX pour implémenter la détection sans actualisation nom d'utilisateur_AJAX lié

Comment implémenter la connexion AJAX sans fonction d'actualisation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!