如何用JavaScript实现图片上传至服务器并实时回显？

本文共计617个文字，预计阅读时间需要3分钟。

关于js实现图片的上传和回显，以下是一个简单的示例代码：

图片上传与回显 /* 设置input标签的父级背景图 */ .background { background-image: url('background.jpg'); width: 300px; height: 200px; } /* 设置input的宽高与父级一致 */ .background input { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; }

这段代码中，我们使用了CSS来设置input标签的父级背景图，并将input的宽高设置为与父级一致。当用户选择文件后，通过FileReader读取文件内容，并将读取到的内容设置为背景图，从而实现图片的上传和回显。

关于js实现图片的上传和回显，曾经用户的代码粘在这里：

样式：这样写样式的道理是给<input>标签的父级设置一个背景图，就是‘+'那个背景图，然后把<input>的宽高设置得跟父级一样，且完全透明（注意是透明不是隐藏），这样点击的时候看似是点击的‘+'的节点，其实点击的是<input>节点。