2

我有一个 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>

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

4

2 回答 2

1

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

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

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

更新 1： 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方法的文档。但似乎有一个限制，比如默认情况下，您不能一次处理多个上传的文件。

于 2015-06-12T05:14:51.053 回答
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 控制器处理上传：

// 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"as 参数的方法，即 HTML 输入控件元素，您可以获得文件数据。

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

注意this是指控制器。我使用创建我的 Beego 控制器func (this *MainController) ControllerName ()

于 2015-06-13T08:06:36.110 回答