ajax 上传文件 (简)

最新推荐文章于 2021-08-05 13:46:19 发布

jia_1418422386

最新推荐文章于 2021-08-05 13:46:19 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/jia_1418422386/article/details/80395215

版权

 
 <form>标签添加enctype="multipart/form-data"属性。 

 
 $("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别 

 
 首先，前者，只能序列化表单中的数据 ，比如文本框等input  select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了，FormData 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。 
 FormData对象，是可以使用一系列的键值对来模拟一个完整的表单 

 
 new FormData使用需要有一个注意点， 

 
 注意点一： 
 ，对于jquery的要求是，好像是 版本1.8及其以上方可支持。 

 
 另外该对象不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）； 

 
 注意点二：(js中配置) 

 
 processData:  
 false 
 , contentType:  
 false 
 ,缺少这二者的设置，将会出现  红色部分的错误提示，提交失败。（ajax传值的时候设置二者） 

 
 processData设置为false。因为data值是FormData对象，不需要对数据做处理。 

 
 cache设置为false，上传文件不需要缓存。 

 
 contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。 

//坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了

  代码： 

 
 html页面还有ajax提交数据 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form enctype="multipart/form-data">
    <input type="file" name="file" ><br><br>
    <input type="button" value="提交">
</form>
<div class="picDis">
    <img src="" alt="">//展示以上传图片
</div>
</body>
</html>
<script src="../kao/jquery-1.9.1.min.js" type="text/javascript"></script>//引入jquery文件
<script>
    $('input[type=button]').click(function(){
        var formData = new FormData($('form')[0]);//获取表单序列化后的
        formData.append('file',$(':file')[0].files[0]);
        $.ajax({
            url:'./formtest.php',
            type: 'POST',
            dataType: "json",
            data: formData,
            //这两个设置项必填
       contentType: false,
            processData: false,
            success:function(data){
                console.log(data);
                if(data.msg != '上传失败'){
                    //注意这里的路径要根据自己的储存文件的路径设置
                    $('.picDis img').attr('src', './'+data.msg);
                }else{
                    alert(data.msg);
                }

            }
        })
    })
</script>

 
 处理数据页面（formtest.php 
 ） 

?php
include_once 'File.class.php';//引入类
$file = $_FILES;//间数据
$obj = File::getObj();//单例模式
$error = $obj->up($file['file']);//上传
if($error != false){
    $arr = ['msg'=>$error];
    $arr1 = json_encode($arr);
    echo $arr1;
}else{
    $arr = ['msg'=>'上传失败'];
    $arr1 = json_encode($arr);
    echo $arr1;
}

File.class.php页面

<?php
header("content-type:text/html;charset=utf-8");
        //接口
        interface up{
            public function up($myfile);
            public function checkerror($error);
            public function checksize($size);
            public function checktype($type);
            public static function getObj();
        }       
final class File implements up{
        public $many;
        public $arr=array("jpg","bmp","jpeg","png","gif");
        public $error;
        private static $obj;
        private function __construct(){}
        public static function getObj(){
            if(self::$obj instanceof self){
                return self::$obj;
            }else{
                self::$obj=new self;
                return self::$obj;
            }
        } 
        private function __clone(){} 
        function up($myfile){
        $this->many=1024*1024*2;
        //验证错误级别
        $res1=$this->checkerror($myfile['error']);
        //文件大小
        $res2=$this->checksize($myfile['size']);
        //验证文件类型
        $res3=$this->checktype($myfile['type']);
        //判断
        if($res1&&$res2&&$res3){   
            //文件位置
            //文件名
            $dir=date("Y")."/".date("m")."/".date("d");
            is_dir($dir) or mkdir($dir,0777,true);
            //图片名
            $late=substr($myfile['name'],strrpos($myfile['name'],"."));
            $file_name=time().rand(10000,99999).$late;
            //连接成路径
            $path=$dir."/".$file_name;
            move_uploaded_file($myfile['tmp_name'],$path);
            return $path;
        }
        else{
            return false;
        }
    }
    //验证错误级别
    function checkerror($error){
        if($error==0){
            return true;
        }else{
            switch($error){
                case 1: $this->error="上传文件超过php.ini中的设置";break;
                case 2: $this->error="上传大小超过表单中的设置";break;
                case 3: $this->error="只有部分文件被上传";break;
                case 4: $this->error="没有文件上传";break;
            }
            return false;
        }
    }
    //验证上传文件大小
    function checksize($size){
        if($size<$this->many){
            return true;
        }else{
            $this->error="文件过大，大于1M";
            return false;
        }
    }
    //验证类型
    function checktype($type){
        if(!empty($type)){
            $style=substr($type,strpos($type,'/')+1);
            if(in_array($style,$this->arr)){
                return true;
            }else{
                $this->error="文件类型不正确 不是jpg,jpeg,bmp,png,gif";
                return false;
            }
        }
    }
    
}
?>

jia_1418422386

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 上传文件 (简)

&lt;form&gt;标签添加enctype="multipart/form-data"属性。$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别首先，前者，只能序列化表单中的数据，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，For...
复制链接

扫一扫