JS手机端多图片上传删除代码

在移动设备上，尤其是手机端，用户经常需要上传图片作为信息的传递方式。然而，由于浏览器的兼容性问题，开发者在实现多图片上传功能时会遇到挑战。本篇主要介绍如何利用JavaScript实现在手机端进行多图片上传和删除的功能，特别关注在Android和iOS系统上的差异。 HTML5引入了`<input type="file" multiple>`属性，用于在桌面浏览器和部分现代移动设备上支持多文件选择。但在Android系统中，尽管`multiple`属性在技术上是支持的，但实际用户体验并不理想，用户仍然只能一次选择一张图片。因此，我们需要为Android设备编写特定的逻辑来处理这一问题。 在iOS设备上，`multiple`属性则可以正常工作，允许用户一次性选择多张图片进行上传。为了实现这个功能，我们可以创建一个`<input type="file">`元素，然后监听`change`事件。当用户选择图片后，`event.target.files`将返回一个FileList对象，包含了所有被选中的文件。通过遍历这个列表，我们可以获取到每个文件的详细信息，如文件名、大小等，并进行预览或上传操作。 对于Android设备的单图片选择，我们依然使用`<input type="file">`，但需要禁用`multiple`属性，并且可能需要监听`click`事件来手动触发文件选择对话框。在用户选择图片后，我们同样可以访问`event.target.files`获取选中的文件。 图片上传前，通常会先进行预览，这可以通过创建`<img>`元素并设置其`src`为File对象的URL（使用`URL.createObjectURL(file)`）来实现。同时，为了提供良好的用户体验，我们还需要考虑图片的尺寸控制，避免大图导致页面加载缓慢。 至于图片的删除，我们可以在前端创建一个展示图片列表的区域，每个图片旁边提供一个删除按钮。当用户点击删除按钮时，根据图片对应的File对象或者数据标识从列表中移除，并清空对应的`<img>`元素。同时，如果已经上传到服务器，还需要发起一个删除请求，将图片从服务器端移除。 为了增强用户体验，我们还可以添加进度条显示文件上传进度，使用`XMLHttpRequest`的`upload`对象的`progress`事件。当文件正在上传时，更新进度条；当上传完成，触发`load`事件，可以显示上传成功的提示。 实现手机端的多图片上传和删除功能需要考虑到不同平台的兼容性问题，利用JavaScript来处理文件选择、预览、上传和删除的逻辑，并确保在各种环境下都能提供流畅的用户体验。在实际开发中，还要注意错误处理和安全性，例如防止上传恶意文件或超出服务器允许的文件大小限制。