JS web 手机端上传图片

在JavaScript Web应用中，手机端上传图片通常涉及到前端用户界面交互和后端文件处理。以下是基本步骤：

1. **HTML部分**：创建一个`<input type="file">`元素让用户选择图片，可以加上一些样式如限制文件类型、显示预览等：

   <input type="file" id="imageInput" accept="image/*">

2. **JavaScript部分**：通过`FileReader API`读取选定的图片，并展示预览，或者使用`FormData`对象将图片数据发送到服务器：

   document.getElementById('imageInput').addEventListener('change', function(e) {
     var file = e.target.files[0];
     if (file) {
       var reader = new FileReader();
       reader.onload = function(event) {
         // 图片预览或者Base64编码显示
         var imgElement = document.createElement('img');
         imgElement.src = event.target.result;
       };
       reader.readAsDataURL(file);
     }
   });

3. **Ajax请求**：在用户选择图片后，你可以通过AJAX发起一个POST请求，将`FormData`包含的图片信息上传到服务器。例如，使用fetch或axios：

   var formData = new FormData();
   formData.append('image', file); // 使用原文件对象

   fetch('/upload-image', {
     method: 'POST',
     body: formData,
     headers: {
       'Content-Type': 'multipart/form-data'
     }
   })
   .then(response => response.json())
   .then(data => console.log('Upload successful:', data));