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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章