jq一键上传文件

最新推荐文章于 2022-04-20 21:25:10 发布

小四是个处女座

最新推荐文章于 2022-04-20 21:25:10 发布

阅读量127

点赞数 1

分类专栏： js 前端文章标签： css 前端 ajax

本文链接：https://blog.csdn.net/xiaosi1413/article/details/123250826

版权

前端同时被 2 个专栏收录

72 篇文章 6 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        .imgCss{
            position: relative;
        }
        .inputText{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
        }
        #uploding{
            margin-bottom: 30px;
        } 
    </style>
</head>
<body>
    <div class="imgCss">   
        <img src="1.png" alt="">
    </div>
    <input type="file"  id="photo" class="inputText">

    <!-- <input type="button"  id="uploding" value="下一步" name="" style="width:100px;height:30px;"> -->
    <script type="text/javascript">
       
         $(document).ready(function(e) {

            $("#photo").on("input",function(){
                var formData = new FormData();
                formData.append("photo",$("#photo")[0].files[0]);
                formData.append("service",'App.Passion.UploadFile');
                if($("#photo")[0].files.length>0){
                    $.ajax({
                        url:'http://www.baidu.com/', /*接口域名地址*/
                        type:'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success:function(res){
                            console.log(res.data);
                            if(res.data["code"]=="succ"){
                                alert('成功');
                            }else if(res.data["code"]=="err"){
                                alert('失败');
                            }else{
                                console.log(res);
                            }
                        }
                    })
                }else{
                    alert("请选择文件")
                }          
             })
         })
    </script>
</body>
</html>