获取图像并 upload/save 它在服务器位置

Question

我有一个 beego 应用程序，我需要将图像从客户端上传到服务器位置。

//Till now I have tried the following script
$("#fileupload").on("click",function(){
  $("#my_file").click();
  userImage = document.getElementById('fileupload');
  imgData = getBase64Image(userImage);
  localStorage.setItem("imgData", imgData);
});

<!--Html where i have kept option for image upload-->
<ul>
  <li style="margin-top:5px;">  .Hii vijay  </li>
  <li><input type="file" id="my_file" style="display: none;" /></li>
  <li><img id="fileupload" name="filetoupload" src="../../static/img/img.png"></li>
</ul>

使用此脚本，当我单击空图像（单击此处添加）时，它会显示一个浏览文件 option.After 选择图像时不会发生任何操作。我的要求是从浏览选项中选择图像，所选图像应保存在服务器位置。

Answer 1

您正在使用的 localStorage 类似于 cookie，永远不会保存在服务器中。它是在客户端保存的每个域。

此外，当您想将位保存到服务器时，您需要做一个表单 post 并且您应该有某种服务器端代码来处理保存部分，例如保存位置和保存位置格式。

尝试探索 Php 或 ASP.NET 或 Jsp 文件上传 - 保存在服务器上。如果没有服务器端代码，就不可能单独使用 HTML 和 Javascript 推送数据，因为它们只是客户端脚本。

更新一： html

<form action="/post/save" method="POST" enctype="multipart/form-data">
    <input type="file" name="images">
</form>

控制器

file, header, err := this.GetFile("images")
if err != nil {
    log.Println("error", err)
} else {
    log.Println("filename", header.Filename)
}

尝试一些关于 Beego GetFile 方法的文档。但是默认情况下似乎有一个限制，您不能一次处理多个上传的文件。

Answer 2

请参阅底部的附加说明...

相关模板标记:

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

相关JavaScript:

$('#imageInput').change(function(){
    var frm = new FormData();
    frm.append('imageInput', input.files[0]);
    $.ajax({
        method: 'POST',
        address: 'url/to/save/image',
        data: frm,
        contentType: false,
        processData: false,
        cache: false
    });
});

Beego控制器处理上传:

// relevant code
// file upload handling
file, header, er := this.GetFile("imageInput")
if file != nil {
    // some helpers 
    // get the extension of the file  (import "path/filepath" for this)
    extension := filepath.Ext(header.Filename)
    // full filename
    fileName := header.Filename
    // save to server`enter code here`
    err := this.SaveToFile("imageInput", somePathOnServer)
}

JavaScript:

一旦 change 事件触发，就会创建一个新的 FormData 对象。文件数据被附加到表单对象，最后代码使用 Ajax.

执行 POST 请求

Beego 控制器:

通过使用 .GetFile() 方法，将 "imageInput" 作为参数，即 HTML 输入控制元素，您可以获得文件数据。

通过使用带有 "imageInput" 和路径作为参数的 .SaveToFile() 方法，您可以将文件保存到服务器。

注this指控制器。我使用 func (this *MainController) ControllerName ()

创建我的 Beego 控制器

获取图像并 upload/save 它在服务器位置

get image and upload/save it in server location

html

javascript

jquery

image-uploading

beego