原生js用ajax上传图片到php服务器并展示

html主要代码

    <input type="file" >
    <button type="button">上传</button>
    <script type="text/javascript">
        var inp = document.querySelector('input');
        var btn = document.querySelector('button');
        btn.onclick = function(){
            var ajaxObj = new XMLHttpRequest();
            // ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //ajax上传图片需要做的处理  创建表单数据对象
            var form = new FormData();
            form.append('upload',1);//附带的判断条件 可有可无
            if(inp.files[0])
            {
                console.log('有文件');
                form.append('upfile',inp.files[0]); //有文件才会获取文件
            }
            ajaxObj.open('post','03文件上传.php',true);
            ajaxObj.onload = function()
            {
                console.log(ajaxObj.responseText);//返回的文件路径
                var img = document.createElement('img');
                img.style.width = '150px';
                img.style.height = '150px';
                img.src = ajaxObj.responseText;//展示上传的图片
                console.log(img);
                btn.parentNode.append(img);
            }
            ajaxObj.send(form); //将文件添加到FormData中发送到服务器

php端代码

<?php
  if(isset($_POST['upload'])) //附带的判断条件
    {
        // print_r($_FILES);
        $fileArr = $_FILES['upfile'];//获取上传文件的属性数组
    }
    
    // print_r($fileArr);
    //将临时文件保存到绝对路径下
    $bool = move_uploaded_file($fileArr['tmp_name'],'files/'.$fileArr['name']);
    if($bool === true)
    {
        //保存成功后返回保存图片的绝对路径
        echo 'files/'.$fileArr['name'];
    }
    else{
        echo '保存文件失败';
    }
?>

小型demo 欢迎测试

增添一个错误问题的解决方法

项目应用中老是返回失败，路径什么绝对正确。各种测试都不对，单独测试又是正确的。可以保证代码绝对没有问题，查了下文档只能是保存的时候文件夹的权限问题了。对比项目跟demo文件夹的权限，果然是项目中文件夹的权限不够，故将保存路径中文件夹的权限提升，为了方便直接改为777了。chmod 777 文件夹名