JavaScript 上传图片的简单例子（js formdata上传图片）

在JavaScript中，您可以使用HTML5的<input type="file">元素来实现图片上传功能。

以下是一个简单的示例代码，演示如何在JavaScript中上传图片：

HTML部分：

<input type="file" id="uploadInput">
<button onclick="uploadImage()">上传图片</button>

JavaScript部分：

function uploadImage() {
  var fileInput = document.getElementById('uploadInput');
  var file = fileInput.files[0];

  if (file) {
    var formData = new FormData();
    formData.append('image', file);

    // 发送图片数据到服务器
    // 这里可以使用XMLHttpRequest或fetch等方法发送请求
    // 请根据您的需求选择适当的方法
    // 示例中使用XMLHttpRequest发送POST请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 上传成功
        console.log('图片上传成功');
      } else {
        // 上传失败
        console.log('图片上传失败');
      }
    };
    xhr.send(formData);
  }
}

API部分：

[HttpPost]
[RequestSizeLimit(5242880)]
 public async Task<APIResult> upload(IFormCollection collection)
 {

            APIResult rtn = new APIResult();

            if (collection == null)
            {
                rtn.code = -100;
                rtn.msg = "图片列表为空";
                return rtn;
            }
            else
            {
                try
                {
                    string file_path = "";
                    // 预处理 用户参数:用户指定子路径                   
                    string userPath = DateTime.Now.ToString("yyyy-MM-dd");
                    if (collection.ContainsKey("path"))
                    {
                        collection.TryGetValue("path", out Microsoft.Extensions.Primitives.StringValues val);
                        if (!val.Equals("undefined"))
                        {
                            userPath = val.ToString();
                        }
                    }

                    // 预处理 文件路径
                    // 注意：这里可能会根据不同的环境来 修改 路径前面是否需要添加 /
                    // 当发现上传不成功，目录无法创建时，可以尝试修改这里
                    file_path = #34;upload/imgs/{userPath}/";
                    var uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, file_path);
                    if (!Directory.Exists(uploadPath))
                    {
                        Directory.CreateDirectory(uploadPath);
                    }

                    // 处理文件
                    FormFileCollection filelist = (FormFileCollection)collection.Files;
                    foreach (IFormFile file in filelist)
                    {
                        // 保存文件到磁盘
                        string name = file.FileName;
                        string FilePath = Path.Combine(uploadPath, name);
                        string type = Path.GetExtension(name);
                        using (var stream = System.IO.File.Create(FilePath))
                        {
                            await file.CopyToAsync(stream);
                        };

                        // 保存文件信息到表
                        Sys_File f = new Sys_File();
                        f.code = "image";
                        f.name = name;
                        f.file_type = type.Trim('.');
                        f.file_group = userPath;
                        f.file_path = #34;/{file_path}{name}";
                        f.is_active = true;
                        f.memo = "";
                        f.createTime = DateTime.Now;
                        using (var dbctx = DBHelper.db)
                        {
                            await dbctx.AddAsync(f);
                            await dbctx.SaveChangesAsync();
                        };
                        // 返回消息，包含文件路径
                        rtn.datas = #34;/{file_path}{name}";
                        rtn.code = 100;
                        rtn.msg = "文件已保存！";
                    }
                }
                catch (Exception ex)
                {
                    rtn.code = -200;
                    rtn.msg = "图片保存失败!";
                    Log4NetUnit.Instance.Log.Error("图片保存失败:" + ex.Message);
                }
                return rtn;
            }
        }

在这个示例中，我们首先在HTML中创建了一个<input type="file">元素，用于选择要上传的图片。

然后，我们在JavaScript中编写了一个uploadImage函数，该函数在点击"上传图片"按钮时触发。

在uploadImage函数中，我们首先获取到<input>元素，并从中获取到用户选择的图片文件。

然后，我们创建一个FormData对象，并将图片文件添加到其中。

接下来，我们可以使用XMLHttpRequest或fetch等方法将图片数据发送到服务器。

在示例中，我们使用XMLHttpRequest发送了一个POST请求，将图片数据作为FormData发送到/upload端点。

您需要根据您的实际情况修改URL和请求方法。

当请求完成时，我们可以根据响应的状态码来判断上传是否成功。

在示例中，如果状态码为200，则表示上传成功，否则表示上传失败。

请注意，由于安全性限制，JavaScript无法直接访问用户的文件系统。

因此，用户必须手动选择要上传的文件。