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

html主要代码

上传

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端代码

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 文件夹名