ajax+php+html+js 上传图片

最新推荐文章于 2022-01-14 09:37:13 发布

chengchengbox

最新推荐文章于 2022-01-14 09:37:13 发布

阅读量347

点赞数 1

分类专栏： php html 文章标签：图片上传

本文链接：https://blog.csdn.net/qq_34297991/article/details/103927677

版权

html 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

php

34 篇文章 0 订阅

订阅专栏

前台代码(选完图片直接上传onchange)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>上传文件</title>
  <script type="text/javascript">
    function sub() {
      var obj = new XMLHttpRequest();
      obj.onreadystatechange = function() {
        if (obj.status == 200 && obj.readyState == 4) {
          document.getElementById('con').innerHTML = obj.responseText;
        }
      }

      // 通过Ajax对象的upload属性的onprogress事件感知当前文件上传状态
      obj.upload.onprogress = function(evt) {
        // 上传附件大小的百分比
        var per = Math.floor((evt.loaded / evt.total) * 100) + "%";
        // 当上传文件时显示进度条
        document.getElementById('parent').style.display = 'block';
        // 通过上传百分比设置进度条样式的宽度
        document.getElementById('son').style.width = per;
        // 在进度条上显示上传的进度值
        document.getElementById('son').innerHTML = per;
      }

      // 通过FormData收集零散的文件上传信息
      var fm = document.getElementById('userfile3').files[0];
      var fd = new FormData();
      fd.append('userfile', fm);

      obj.open("post", "ceshi.php?act=ceshi");
      obj.send(fd);
    }
  </script>
  <style type="text/css">
    #parent {
      width: 200px;
      height: 20px;
      border: 2px solid gray;
      background: lightgray;
      display: none;
    }
    #son {
      width: 0;
      height: 100%;
      background: lightgreen;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>Ajax实现进度条文件上传</h2>
  <div id="parent">
    <div id="son"></div>
  </div>
  <p id="con"></p>
  <input type="file" onchange="sub();" name="userfile" id="userfile3"><br><br>
  <input type="button" name="btn" value="文件上传" onclick="sub()">
</body>
</html>

后台代码（注意文件地址是否填写正确）

if ($_FILES['userfile']['error'] > 0) {
                exit("上传文件有错".$_FILES['userfile']['error']);
                echo errors;
        }

        // 定义存放上传文件的真实路径
        $path = '../images/';
        // 定义存放上传文件的真实路径名字
        $name = $_FILES['userfile']['name'];

        // 将文件的名字的字符编码从UTF-8转成GB2312
        $name = iconv("UTF-8", "GB2312", $name);

        // 将上传文件移动到指定目录文件中
        if (move_uploaded_file($_FILES['userfile']['tmp_name'], $path.$name)) {
                echo "文件上传成功";
        } else {
                echo "文件上传失败";
        }

请测成功

下载案例地址：https://download.csdn.net/download/qq_34297991/12097033

chengchengbox

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax+php+html+js 上传图片

前台代码(选完图片直接上传onchange)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传文件</title> <script type="text/javascript"> function...
复制链接

扫一扫