关于HTML中上传图片
当表单包含文件上传元素时，必须将表单的enctype属性设置为multipart/form-data，并且method属性必须设置为post，这样浏览器才能正确识别并处理文件上传。通常，enctype属性是必不可少的，因为它能够确保文件内容以正确的格式发送到服务器，从而避免上传失败或文件损坏的情况。
浏览器只允许用户通过点击来选择本地文件，使用JavaScript对的value属性赋值是无效的。此外，当用户选择了某个文件后，JavaScript也无法直接获取该文件的真实路径，这是由于安全原因，浏览器不会暴露用户文件系统的具体结构。
不过，我们可以通过File和FileReader两个对象来获取文件信息并读取文件内容。这种方式可以让我们在用户选择文件后，获取到文件的详细信息，并进行相应的处理。例如，利用File对象，我们可以访问文件的名称、类型、大小等属性；而利用FileReader对象，则可以读取文件的内容，将其转换为文本或数据URL形式。这在实现图片预览、文件校验等功能时非常有用。
HTML文件：
CSS文件：
#image-preview {
border: 1px solid #ccc;
width: 100%;
height: 100%;
max-width: 200px;
max-height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
JavaScript：