图片上传与显示

 pc系统的一个功能，调出电脑本地的图片，

//图片上传显示
    $(".lccid").on("change", "input[type=file]", function() {
        $(this).prev().css("opacity","1");

        var filePath = $(this).val();//读取图片路径
        var fr = new FileReader();//创建new FileReader()对象
        var imgObj = this.files[0];//获取图片
        
        fr.readAsDataURL(imgObj);//将图片读取为DataURL
        var obj = $(this).prev()[0];//
    
        if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1];
//            var oldImg=data.listWeixinNews[dataNum].imagepath;
            $(this).parent().next().show();
            fr.onload = function() {
                obj.src = this.result;
//                data.listWeixinNews[dataNum].imagepath = this.result;
//                if(dataNum == 0){
//                    document.getElementById('coverPicture').src = data.listWeixinNews[0].imagepath;
//                    document.getElementById('showHowImg').src = data.listWeixinNews[0].imagepath;
//                }else{
//                    document.getElementById('coverPicture').src = this.result;
//                    $('.showHow-deal').children().eq(dataNum).children().eq(1).attr("src",this.result);
//                }
            };
//            var formData = new FormData(); 
//            var dataWeiXin = data.listWeixinNews[dataNum];
//            formData.append('picFile', $('.file')[0].files[0]);  //添加图片信息的参数
//            formData.append('sizeid',123);  //添加其他参数
//            $.ajax({
//                url: contextPath+"/image/upload",
//                type: 'POST',
//                cache: false, //上传文件不需要缓存
//                data: formData,
//                processData: false, // 告诉jQuery不要去处理发送的数据
//                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
//                success: function (data) {
//                    if(data.status==1){
//                        var srcimg=contextPath+"/img/"+data.message;
//                        document.getElementById("coverPicture").src = srcimg;
//                        dataWeiXin.imagepath = data.message;
//                        var map={"oldImg":oldImg};
//                        if(oldImg != ""){
//                            $.ajax({
//                                url: contextPath+"/image/deleteFile?oldImg="+oldImg,
//                                type:'get',
//                                dataType:'json',
//                                success: function (data) {
//                                }
//                            }); 
//                        }
//                        $(".file").val("");
//                    }else{
//                        alert("上传失败");
//                    }
//                    
//                },
//                error: function (data) {
//                    alert("上传失败");
//                }
//            });
        } else {
            $(this).parent().next().show();
            $(this).parent().next().children("i").html("您未上传文件，或者您上传文件类型有误！").css("color", "red");
            //$(this).parent().next().html("您未上传文件，或者您上传文件类型有误！").css("color","red");
            return false
        }
    });

 注释掉部分是配合后台的，因为前后端一起的，可以参考这个  https://blog.csdn.net/x550392236/article/details/76690927?tdsourcetag=s_pcqq_aiomsg