原生ajax实现文件上传

最新推荐文章于 2022-06-15 16:16:59 发布

原创最新推荐文章于 2022-06-15 16:16:59 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js #文件上传 #史上最简单

本文介绍了一个简单的文件上传功能实现，包括前端使用JavaScript进行文件类型的验证和大小限制，并通过AJAX发送到服务器。后端采用PHP接收文件并进行重命名及移动操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视图层 JS 函数：
   <input type="file" onchange="sendFile()" id="up" />
   function sendFile(){
       var fd = new FormData();
       var pic=document.getElementById("up").files[0];

var type=pic.type; //文件类型

       if(type!="image/jpeg"&&type!="image/png"){
            alert("请上传正确格式图片");
            return false;
        }

var size=parseInt(pic.size)/1024/1024; //文件大小（换算成 M）

if(size>5){alert('文件过大');return false;}

       fd.append(pic.name,pic);
       var xhr=new XMLHttpRequest();
       xhr.onreadystatechange=function(){
           if(xhr.readyState==4){
               alert(xhr.responseText);
           }
       }
       xhr.open("POST",''url",true);
       xhr.send(fd);
    }

控制器层：
        foreach($_FILES as $v){
            $image=$v;
        }
        unset($_FILES);
        //生成新的文件名
        $name=$image["name"];
        $index=strripos($name,".");
        $suffix=uniqid().substr($name,$index,strlen($name)-$index);
        //创建目录
        $dir="./rm_word/".date("Y-m-d");
        if(!file_exists($dir)){
            mkdir($dir,true,777);
        }
        $filename=$dir."/".$suffix;
        //移动文件
        $res=move_uploaded_file($image['tmp_name'],$filename);
        if($res){
           echo 'success';
        }