Javascript 上传前在旁边预览图像

我希望能够在上传之前预览我的图片，我一直在网上做研究，看看过去的问题，这些问题和我的有点相关，但每次我试图复制JS代码并做一些修改，这对我来说都不起作用。可能是因为我还在努力学习JavaScript和J query，有人对实现这一点的方法提出了建议吗

这是我的HTML和CSS

var计数=0；
功能手柄文件选择（evt）{
var$fileUpload=$（“input#Photofile[type='file']）；
count=count+parseInt（$fileUpload.get（0.files.length））；
if（parseInt（$fileUpload.get（0.files.length）>4 | | count>3）{
警告（“您最多只能上传3张照片”）；
count=count-parseInt（$fileUpload.get（0.files.length））；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
$（'#Photofile'）.change（函数（evt）{
handleFileSelect（evt）；
});
$（“#列表”）。在（'单击'，'上。删除\u img#u预览'，函数（）{
$（this.parent（'span'）.remove（）；
//这不起作用。。。
var i=array.indexOf（$（this））；
如果（i！=-1）{
阵列拼接（i，1）；
}
//我也试过：
//$（this）.parent（'span'）.splice（1,1）；
计数--；
});
form.post图像采集{
保证金：-20px 0px 0px-20px；
溢出：隐藏；
}
形式。张贴图像{
位置：相对位置；
浮动：左；
高度：152px；
宽度：170px；
背景#f2f2；
边框：1px虚线#ccc；
填充：0；
边界半径：4px；
文本对齐：居中；
光标：指针；
}
先生{
右边距：20px；
}
.mts{
边缘顶部：10px；
}
形式。后图像img{
最大宽度：80px；
最大高度：80px；
宽度：自动；
高度：自动；
垂直对齐：顶部；
边界半径：3px；
溢出：隐藏；
}
形式。后图像。图标相机{
显示：无；
}
表单.后期图像输入{
位置：绝对位置；
z指数：2；
不透明度：0；
宽度：100%；
身高：100%；
}
form.post-image.empty{
位置：相对位置；
浮动：左；
高度：130像素；
宽度：130px；
背景#f2f2；
边框：1px虚线#ccc；
填充：0；
边界半径：4px；
文本对齐：居中；
光标：指针；
垂直对齐：顶部；
}
form.post-image.empty.icon摄像机{
显示：块；
高度：30px；
线高：30px；
左：40%；
位置：绝对位置；
文本对齐：居中；
最高：50%；
宽度：30px；
游标：继承；
利润率：-15px 0px 0px-15px；
}
form.post-image.empty.icon-camera-img{
高度：60px；
宽度：60px；
}
form.post-image.empty输入{
光标：指针；
}
形式。后图像p，
.file_container-orange p{
利润率：10px0；
保证金：1rem 0；
文本对齐：居中；
字体系列：“OpenSansSemiBold”，无衬线；
}
.大写字母{
文本转换：大写；
}
#名单{
浮动：左；
}
.拇指{
高度：130像素；
宽度：130px；
右边距：20px；
边缘顶部：10px；
}
.删除\u img\u预览{
位置：相对位置；
顶部：-46px；
右：40px；
字体大小：20px；
线高：1；
填充：4px6px；
背景：白色；
边界半径：0px 0px 0px 3px；
文本对齐：居中；
光标：指针；
}
.删除\u img\u预览：之前{
内容：“×”；
}

图像*
照片

参考



$（函数（）{
$（“#Photofile”）.change（函数（）{
如果（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#imageDisplay，#imageDisplay1，#imageDisplay2'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（this.files[0]）；
}
});
});
form.post图像采集{
保证金：-20px 0px 0px-20px；
溢出：隐藏；
}
形式。张贴图像{
位置：相对位置；
浮动：左；
高度：152px；
宽度：170px；
背景#f2f2；
边框：1px虚线#ccc；
填充：0；
边界半径：4px；
文本对齐：居中；
光标：指针；
}
先生{
右边距：20px；
}
.mts{
边缘顶部：10px；
}
形式。后图像img{
最大宽度：80px；
最大高度：80px；
宽度：自动；
高度：自动；
垂直对齐：顶部；
边界半径：3px；
溢出：隐藏；
}
形式。后图像。图标相机{
显示：无；
}
表单.后期图像输入{
位置：绝对位置；
z指数：2；
不透明度：0；
宽度：100%；
身高：100%；
}
form.post-image.empty{
位置：相对位置；
浮动：左；
高度：130像素；
宽度：130px；
背景#f2f2；
边框：1px虚线#ccc；
填充：0；
边界半径：4px；
文本对齐：居中；
光标：指针；
垂直对齐：顶部；
边缘顶部：50px；
}
form.post-image.empty.icon摄像机{
显示：块；
高度：30px；
线高：30px；
左：40%；
位置：绝对位置；
文本对齐：居中；
最高：50%；
宽度：30px；
游标：继承；
利润率：-15px 0px 0px-15px；
}
form.post-image.empty.icon-camera-img{
高度：60px；
宽度：60px；
}
form.post-image.empty输入{
光标：指针；
}
形式。后图像p，
.file_container-orange p{
利润率：10px0；
保证金：1rem 0；
文本对齐：居中；
字体系列：“OpenSansSemiBold”，无衬线；
}
.大写字母{
文本转换：大写；
}
#名单{
浮动：左；
}
.拇指{
高度：130像素；
宽度：130px；
右边距：20px；
边缘顶部：10px；
}
.删除\u img\u预览{
位置：相对位置；
顶部：-46px；
右：40px；
字体大小：20px；
线高：1；
填充：4px6px；
背景：白色；
边界半径：0px 0px 0px 3px；
文本对齐：居中；
光标：指针；
}
.删除\u img\u预览：之前{
内容：“×”；
}