javascript - 获取图像并将其上传/保存在服务器位置

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>

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

Answer 1

请参阅底部的附加注释...

相关模板标记:

<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 Controller 处理上传:

// 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 Controller :

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

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

注意 this 指的是 Controller 。我使用 func (this *MainController) ControllerName ()

创建我的 Beego Controller