在现代的网页应用中，图片上传是一个非常常见和重要的功能。JavaScript 提供了一些强大的技术来实现图片上传功能，包括使用文件 API 和 FormData 对象。

首先，我们需要在 HTML 中创建一个文件上传的输入字段：

<input type="file" id="upload-btn" accept="image/*"> <button id="submit-btn">上传</button> <div id="preview-container"></div>

接下来，我们可以使用 JavaScript 来处理图片的上传过程。首先，我们需要获取到用户选择的文件，并将其预览在页面上：

const uploadBtn = document.getElementById('upload-btn'); const previewContainer = document.getElementById('preview-container');   uploadBtn.addEventListener('change', function() {   const file = this.files[0];   const reader = new FileReader();     reader.addEventListener('load', function() {     const image = new Image();     image.src = reader.result;       previewContainer.appendChild(image);   });     if (file) {     reader.readAsDataURL(file);   } });

上述代码中，我们监听了文件上传字段的 change 事件，当用户选择了文件后，我们使用 FileReader 对象将该文件读取为一个 data URL，然后创建一个新的 Image 对象，并将其添加到页面上的预览容器中。

接下来，我们可以使用 AJAX 或 Fetch API 将图片上传到服务器。在这里，我们使用 Fetch API 来进行示例：

const submitBtn = document.getElementById('submit-btn');   submitBtn.addEventListener('click', function() {   const file = uploadBtn.files[0];   const formData = new FormData();     formData.append('image', file);     fetch('/upload', {     method: 'POST',     body: formData   })   .then(response => response.json())   .then(data => {     // 处理服务器返回的数据   })   .catch(error => {     // 处理上传过程中的错误   }); });

上述代码中，我们监听了上传按钮的 click 事件，当用户点击按钮后，我们使用 FormData 对象来创建一个包含图片的表单数据。然后，我们使用 Fetch API 发送一个 POST 请求到服务器的 "/upload" 路径，同时将表单数据作为请求的 body。在服务器端，我们可以使用相应的后端技术来处理上传的图片。

通过上述的示例代码，我们可以很容易地实现图片上传功能。当然，为了保证图片上传的安全性和性能，我们还需要一些额外的处理，如对上传文件的类型和大小进行验证，以及使用适当的服务器端技术来处理图片上传。

总结起来，使用 JavaScript 实现图片上传功能需要以下步骤：

创建文件上传的输入字段和预览容器。

监听文件上传字段的 change 事件，并将选择的文件进行预览。

监听上传按钮的 click 事件，并使用 FormData 对象创建包含图片的表单数据。

使用 Fetch API 或其他 AJAX 技术将图片上传到服务器，并处理服务器返回的数据。

通过上述的步骤和示例代码，我们可以很方便地实现图片上传功能，并且能够提供更好的用户体验。