Javascript jquery预览图像不工作

所以我试图实现一个预览按钮，这样当我的用户点击上传按钮图像时，他们可以进行预览，但问题是它不起作用，我想知道为什么？？简要说明：我有一个js函数，可以创建新元素并将其附加到p标记日期。该函数将创建预览图像代码

//用于创建新元素的代码
函数createElements（）{
const userQuestions=document.querySelector（“#userQuestions”）；
userQuestions.insertAdjacentHTML(
“beforeend”，没有图像
);
}
///预览图像的代码
函数handleImage（e）{
var imageLoader=document.getElementById（'filePhoto'）；
imageLoader.addEventListener（'change'，handleImage，false）；
var reader=new FileReader（）；
reader.onload=函数（事件）{
$（'.uploader'）.html（''）；
}
reader.readAsDataURL（e.target.files[0]）；
}

.uploader{宽度：50%；高度：35%；背景：F3；边框：2px虚线35; 0091ea；}

添加元素

HTML：

<div class="row">
  <div class="col-xs-4">
    <div class="form-group">
      <label>Company Logo</label>
      <input type="file" class="form-control" value="" name="companyLogo" id="companyLogo" accept="image/*" />
    </div>
  </div>
  <div id="displayImage">
     <img id="imgData" src="#" alt="your image" height="150px" width="150px" />
  </div>
</div>

HTML:

利用jQuery——特别是使用

对于动态创建的元素

$（函数（）{
var userQuestions=$（“#userQuestions”）；
//为按钮创建onclick事件处理程序
$（“#加法器”）。单击（函数（）{
//ID必须是唯一的-因为您可以拥有任意数量的filePhoto，所以请改用类
userQuestions.append(
“
无图像”
);
});
//为.uploader创建委派的onclick事件处理程序
userQuestions.on（'click'，'uploader'，function（）{
//您只希望在文件输入之后立即将其作为目标
$（this）.next（“[type=file]”）。单击（）；
});
//为.filePhoto创建委派的onchange事件处理程序
userQuestions.on（'change'，'.filePhoto'，function（）{
//查找相关上载程序
var uploader=$（this.prev（'.uploader'）；
//检查文件是否已给出
if（this.files&&this.files.length）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
html（“”）；
}
reader.readAsDataURL（this.files[0]）；
}
});
});
.uploader{
宽度：50%；
身高：35%；
背景:#f3；
边框：2个虚线#0091ea；
}
.filePhoto{
显示：块；
宽度：185px；
}

添加元素
利用jQuery——特别是使用


对于动态创建的元素


$（函数（）{
var userQuestions=$（“#userQuestions”）；
//为按钮创建onclick事件处理程序
$（“#加法器”）。单击（函数（）{
//ID必须是唯一的-因为您可以拥有任意数量的filePhoto，所以请改用类
userQuestions.append(
“
无图像”
);
});
//为.uploader创建委派的onclick事件处理程序
userQuestions.on（'click'，'uploader'，function（）{
//您只希望在文件输入之后立即将其作为目标
$（this）.next（“[type=file]”）。单击（）；
});
//为.filePhoto创建委派的onchange事件处理程序
userQuestions.on（'change'，'.filePhoto'，function（）{
//查找相关上载程序
var uploader=$（this.prev（'.uploader'）；
//检查文件是否已给出
if（this.files&&this.files.length）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
html（“”）；
}
reader.readAsDataURL（this.files[0]）；
}
});
});
.uploader{
宽度：50%；
身高：35%；
背景:#f3；
边框：2个虚线#0091ea；
}
.filePhoto{
显示：块；
宽度：185px；
}

添加元素
简短n简单

不需要在单击时创建元素。
只需添加一个图像标签，并设置一个默认图像，如未选择图像或类似的东西

下面的代码将帮助您

<input type="file" name="myCutomfile" id="myCutomfile"/>


<img id="customTargetImg" src="default.jpg" width="400" height="250">

$("#myCutomfile").change(function() {    
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#customTargetImg').attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
});


$（“#myCutomfile”）.change（函数（）{
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'customTargetImg'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（this.files[0]）；
}
});
简短n简单

不需要在单击时创建元素。
只需添加一个图像标签，并设置一个默认图像，如未选择图像或类似的东西

下面的代码将帮助您

<input type="file" name="myCutomfile" id="myCutomfile"/>


<img id="customTargetImg" src="default.jpg" width="400" height="250">

$("#myCutomfile").change(function() {    
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#customTargetImg').attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
});


$（“#myCutomfile”）.change（函数（）{
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'customTargetImg'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（this.files[0]）；
}
});
这太好了，我很感激！：D但我的应用程序的问题是，函数createElements（）中有一堆代码，我不能忽略它：（删除createElement函数不是一个选项，我试图修改你的代码以将其放入函数中，但它不起作用。谢谢你，伙计，我真的很感谢你的支持。Thant就是这样！！非常感谢！！嘿嘿，耶！这很好，我很感激！：D但我的应用程序的问题是createElem函数中有一堆代码ents（），我不能忽略它：（删除createElement函数不是一个选项，我试图修改你的代码以将其放入函数中，但它不起作用。谢谢你，伙计，我真的很感谢你的支持。谢谢你！！非常感谢！！嘿嘿耶！