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函数结束