图片上传与显示

 

 

 

 

//图片上传显示
    $(".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
        }
    });

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效