Maison > Article > interface Web > Comment télécharger des fichiers avec ajax sans actualiser

Comment télécharger des fichiers avec ajax sans actualiser

php中世界最好的语言original: 2018-03-31 10:56:141437parcourir

Cette fois, je vais vous montrer comment télécharger des fichiers avec ajax sans actualiser. Quelles sont les précautions pour qu'ajax télécharge des fichiers sans actualiser. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'exemple de cet article partage le code spécifique pour ajax pour implémenter la fonction de téléchargement de fichiers sans actualiser pour votre référence. Le contenu spécifique est le suivant

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('btn');
  var oMyFile = document.getElementById('myFile');
  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 + ' : ' + 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 + ' : ' + d.url); //显示上传成功 并且显示文件路径
    }
    xhr.open('post','post_file.php',true); //open打开的方式不能使用get,上传文件的地址,使用异步上传
    //在使用post发送的时候必须要带一些请求头信息
    xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');
    //send要发送数据 
    //将要上传的数据转换成二进制数据
    //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据
    var oFormData = new FormData(); //通过FormData来构建提交数据
    oFormData.append('file',oMyFile.files[0]);
    xhr.send(oFormData);
  }
}
</script>
</head>
<body>
  <input type="file" id="myFile" /><input type="button" id="btn" value="上传" />
</body>
</html>

Backend

code phppost_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,'msg'=>'错误提交方式'));
}
if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){
  $pic = $_FILES['file'];
  if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
    exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));
  }
}
echo $_FILES['file']['error'];
exit_status(array('code'=>1,'msg'=>'出现了一些错误'));
function exit_status($str){
  echo json_encode($str);
  exit;
}
?>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site php chinois !

Lecture recommandée :

Comment implémenter une requête interdomaine WebApi Ajax à l'aide de CORS

Comment implémenter le chargement dynamique de combos avec Ajax (Avec code)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec AjaxArticle suivant：Explication détaillée des étapes pour implémenter des requêtes inter-domaines avec Ajax

Articles Liés

Voir plus