How to upload files with ajax without refreshing-JS Tutorial-php.cn

How to upload files with ajax without refreshing

php中世界最好的语言

Release： 2018-03-31 10:56:14

Original

1391 people have browsed it

This time I will show you how to upload files with ajax without refreshing. What are the precautions for uploading files with ajax without refreshing? The following is a practical case, let's take a look.

The example in this article shares the specific code for ajax to implement the function of uploading files without refreshing for your reference. The specific content is as follows

The detailed code is as follows

<!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>

Copy after login

Backend

php codepost_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;
}
?>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!