formData上传图片隐藏input框，上传图片时展示图片

在使用element ui 的上传有问题，用了以下方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


   
        <label for="files1" style="cursor: pointer;height:178px">
           上传图片
        </label>
        <input style="display: none;" type="file" id="files1" multiple onchange ="imgChange()" size="mini">
        <div><img src="" alt="" class="imgs"></div>


 
    <script>
        function imgChange(){
            
            var  file=document.getElementById('files1')
            var imgs=document.getElementsByClassName('imgs')
            
            var imgsurl=URL.createObjectURL(file.files[0]);//图片转换
            imgs[0].src=imgsurl    //展示图片
            // 开始上传
            var formData = new FormData();
            var equipmentImg={
                age:12,
                arr:[1,2,3,4]
            }
            formData.append('file', file.files[0]);//你的图片
            formData.append('equipmentImg', JSON.stringify(equipmentImg));//你的参数
            // 这里没有引入jq，不在...
            $.ajax({
            url: "admin.php?r=org/orguser/addusers",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
            },
            error:function(data){
                console.log(data)
            }
        })


        }




    </script>
</div>
</div>
    <style>
    
  .imgs{
      width: 200px;
      height: 200px;
  }



    </style>
</body>
</html>

SKY555ing

发布了44 篇原创文章 · 获赞 13 · 访问量 3万+

私信关注

formData上传图片隐藏input框，上传图片时展示图片

猜你喜欢