原生ajax上传图片

HTML部分

<div class&＃61;&＃39;progress&＃39;><div class&＃61;"step">div>div><form action&＃61;""><input type&＃61;"text" name&＃61;&＃39;name&＃39; placeholder&＃61;"请输入姓名"><input type&＃61;"text" name&＃61;&＃39;skill&＃39; placeholder&＃61;"请输入技能"><input type&＃61;"file" name&＃61;&＃39;icon&＃39;>form><input type&＃61;"button" value&＃61;&＃39;ajax2.0&＃39;>


CSS部分

<style>.progress {width: 300px;height: 20px;border: 1px solid hotpink;border-radius: 20px;overflow: hidden;}.step {height: 100%;width: 0;background: greenyellow;}style>


Javascript部分

<script>// 如果我们要使用 ajax2.0 结合FormData 来提交数据 必须使用 postdocument.querySelector(&＃39;input[type&＃61;button]&＃39;).onclick &＃61; function () {//1.创建对象var xhr &＃61; new XMLHttpRequest();//2.设置请求行(get请求数据写在url后面)xhr.open(&＃39;post&＃39;, &＃39;./saveFiles.php&＃39;);//3.设置请求头(get请求可以省略,post不发送数据也可以省略)// 如果使用的时 formData可以不写 请求头 写了 无法正常上传文件// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//3.5注册回调函数xhr.onload &＃61; function () {console.log(xhr.responseText);}// XHR2.0新增 上传进度监控xhr.upload.onprogress &＃61; function (event) {// console.log(event);var percent &＃61; event.loaded / event.total * 100 &＃43; &＃39;%&＃39;;console.log(percent);// 设置 进度条内部step的 宽度document.querySelector(&＃39;.step&＃39;).style.width &＃61; percent;}// XHR2.0新增 var data &＃61; new FormData(document.querySelector(&＃39;form&＃39;));//4.请求主体发送(get请求为空&＃xff0c;或者写null&＃xff0c;post请求数据写在这里&＃xff0c;如果没有数据&＃xff0c;直接为空或者写null)xhr.send(data);}
script>


PHP部分


// 获取提交的文件信息print_r($_FILES); // 保存上传的数据
move_uploaded_file($_FILES[&＃39;icon&＃39;][&＃39;tmp_name&＃39;],&＃39;./files/&＃39;.$_FILES[&＃39;icon&＃39;][&＃39;name&＃39;]);


转载来自&＃xff1a;https://blog.csdn.net/hellow_world_/article/details/78230150