使用javascript 和 $.ajax 实现文件（图片）上传。

最新推荐文章于 2022-12-31 19:56:49 发布

岛泪

最新推荐文章于 2022-12-31 19:56:49 发布

阅读量321

点赞数

分类专栏：实战文章标签： javascript ajax 文件上传图片上传

本文链接：https://blog.csdn.net/weixin_44161401/article/details/89442878

版权

实战专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo1</title>
</head>
<body>
    <input type="file" id="file">
    <button type="button" onclick="submit(this)">提交</button>


    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script>
        function submit(button){
            //把当前的button对象传入到函数里来，目的是使用户点击提交按钮后，把提交按钮禁用掉，防止用户重复提交文件。

            


            //获取input 对象
            let file = document.getElementById("file");


            if(!file.value){
                //检查input对象里的value属性，如果没有选择上传文件，value会等于空字符串。
                return  false;
            }



            let image = file.files[0]; //获取input 对象里的文件对象
            
            
            
            //上传之前需要对文件进行检验

            let type = image.type; //文件对象里的type属性是文件的类型。
            let size = image.size; //文件对象里的size属性是文件的大小。
            let name = image.name; //文件对象里的name属性是文件的名字。
            let suffix = name.substr(name.lastIndexOf(".")+1); //获取文件名后缀。
            //字符串对象的 lastIndexOf 方法，返回参数在字符串中最后一次出现的下标。
            //字符串对象的 substr 方法，返回指定下标之间的字符串。

            
            let allowSize = 5242880;  //上传文件大小允许的最大值，单位是b，我这里设置成5242880b，即5mb。
            let allowType = ["image/jpeg","image/jpg","image/png"]; //上传文件允许的类型，我这里设置允许上传三个类型。
            let allowSuffix = ["jpeg","png","jpg"]; //上传文件允许的后缀名。



            if(size>allowSize){
                return false;
            }

            if(allowType.indexOf(type)===-1){
                //数组对象的 indexOf 方法可返回参数在数组中首次出现的位置，如果没找到则返回-1。
                return false;
            } 
            
            if(allowSuffix.indexOf(suffix.toLowerCase())===-1){
                //因为 indexOf 方法对参数大小写敏感，所以需要对获得的后缀名转换成小写。
                return false;
            }


            button.disabled= "disabled";//禁用掉按钮。
            
            let formData = new FormData(); //创建 一个空的 FormData 对象
            formData.append("image",image);
            // 在FormData对象里的append方法写入2个参数，第一个参数是规定上传文件的名字，
            // 服务端以这个名字接收文件，拿php举例，比如这里写的是image，后台就要这样写
            // $image = $_POST['image'];
            // 文件一般都是以POST方式提交的，因为POST方式对文件大小和类型没有限制，GET对文件大小和类型都有限制。
            // 第二个是前面获得的文件对象。
            formData.append("session","abcwqewavzxvzxvasdweqewwqq");
            //还可以添加其他的东西，比如如果需要用户登录才可以上传图片的话，这里可以添加一个session ID 用来验证用户信息，我这里的session 值是乱写的。



            $.ajax({
                url:"demo1.php",//提交到服务端的脚本。
                type:"post",//文件一般都是以POST方式提交的，因为POST方式对文件大小和类型没有限制，GET对文件大小和类型都有限制。
                data:FormData,//data的值是前面的FormData对象。
                contentType:false,//如果不设置成false,这里会用默认的application/x-www-form-urlencoded; charset=UTF-8，这是不行的。
                processData:false,//是否对data里的数据进行序列化处理，填false。
                dataType:"json",//我的服务端的返回值是json格式的，所以这里我填了json。
                success:function(e){
                    //请求成功时执行的函数
                    button.removeAttribute("disabled");//把按钮的禁用属性移除
                },
                error:function(e){
                    //发生错误时执行函数
                    button.removeAttribute("disabled");//把按钮的禁用属性移除
                }
            })


         
        }
    </script>
</body>
</html>

岛泪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用javascript 和 $.ajax 实现文件（图片）上传。

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫