JQ前端上傳圖片顯示在頁面以及發送到後端服務器

// 單張上傳照片

 

 

html：

<div class="azwoo"></div>

<div class="azwot">

         <input type="file" name="" class="fileinput13" data-id="9" multiple="multiple">

          <span>選擇圖片</span>

 </div>

JS代碼：

解釋：咱們再看這行代碼的背景，HTML5支持multiple屬性，即<input type="file">可能會添加multiple屬性並賦值：multiple="multiple"，

即<input type="file" multiple="multiple">，這樣一次性可同時上傳多張圖片，因此得到一張圖片的方法就是：$('xx')[0].files[0]

    $(" .fileinput13").change(function () {

        var file = this.files[0];

        readFile(file,$(this).parent().siblings(".azwoo"));

        image_id=$(this).attr("data-id");

    });

    var on =document.querySelector(".azwoo");

    //發請求開始

    function readFile(file,element) {

         //        新建閱讀器

        var reader = new FileReader();

         //        根據文件類型選擇閱讀方式

        switch (file.type){

            case 'image/jpg':

            case 'image/png':

            case 'image/jpeg':

            case 'image/gif':

            reader.readAsDataURL(file);

            break;

        };

         //        當文件閱讀結束後執行的方法

        reader.addEventListener('load',function () {

             //         若是說讓讀取的文件顯示的話 仍是須要經過文件的類型建立不一樣的標籤

            switch (file.type){

                case 'image/jpg':

                case 'image/png':

                case 'image/jpeg':

                case 'image/gif':

                var img = document.createElement('img');

                img.src = reader.result;

                console.log(image_id+img.src);

                element.append(img);

                element.show();

                $.ajax({

                    type:"post",

                    url:"http://192.168.0.171:8080/WSHD/jiekou7/ADImage",

                    dataType:"json",

                    data:{

                        image:img.src,

                        style:4,

                        id:image_id

                    },

                    success:function(res){

                        console.log("上傳成功！！！！！！！！！");

                    

                    }

                });//請求結束

 

                break;

                }

            });

            

        };//readFile函數結束