龙空技术网

JavaScript 上传图片的简单例子

凡人兔子张 122

前言:

现在姐妹们对“js图片另存为图片”可能比较着重,小伙伴们都需要分析一些“js图片另存为图片”的相关资讯。那么小编在网络上汇集了一些对于“js图片另存为图片””的相关内容,希望姐妹们能喜欢,你们一起来了解一下吧!

在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 = $"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 = $"/{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 = $"/{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无法直接访问用户的文件系统。

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

标签: #js图片另存为图片 #htmltojpg #csshtml例子 #html放图片的文件夹 #jsaddcss