Question

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

＆＃13;

//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);
});

＆＃13;

<!--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>

＆＃13;

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

Answer 1

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

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

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

更新1： HTML

int inUse(char *s[],int len)
{

int count=0;

for(i=0; i<len, i++)
{
    if(s[i] != NULL)
    {
        count ++;
    }
}

return count;

控制器

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

尝试使用 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()方法作为参数（{1}}作为HTML输入控件元素，您可以获取文件数据。

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

注意"imageInput"指控制器。我使用this

创建了我的Beego控制器

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

2 个答案: