suchen

Heim >Web-Frontend >js-Tutorial >So laden Sie Dateien mit Ajax hoch, ohne sie zu aktualisieren

So laden Sie Dateien mit Ajax hoch, ohne sie zu aktualisieren

php中世界最好的语言
php中世界最好的语言Original
2018-03-31 10:56:141483Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Dateien mit Ajax hochladen, ohne sie zu aktualisieren. Das Folgende ist ein praktischer Fall, schauen wir uns das an. Das Beispiel in diesem Artikel teilt den spezifischen Code für Ajax, um die Funktion zum Hochladen von Dateien ohne Aktualisierung zu Ihrer Referenz zu implementieren. Der spezifische Inhalt lautet wie folgt

Der detaillierte Code lautet wie folgt

Backend 
<!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>
PHP-Code

post_file.php

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website! 
<?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;
}
?>

Empfohlene Lektüre:

So implementieren Sie eine domänenübergreifende WebApi-Ajax-Anfrage mit CORS


So implementieren Sie das dynamische Laden von Kombinationsfelder mit Ajax (mit Code)

Das obige ist der detaillierte Inhalt vonSo laden Sie Dateien mit Ajax hoch, ohne sie zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Schritte zur Implementierung domänenübergreifender Anfragen mit AjaxNächster Artikel：Ausführliche Erläuterung der Schritte zur Implementierung domänenübergreifender Anfragen mit Ajax

In Verbindung stehende Artikel

Mehr sehen