获取图像并将其上传/保存到服务器位置 [英] get image and upload/save it in server location

问题描述

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

=jsdata-hide =false>

//直到现在我尝试了以下脚本$（＃fileupload）。on（click，function（）{$（＃my_file）。click（）; userImage = document.getElementById（'fileupload'）; imgData = getBase64Image （userImage）; localStorage.setItem（imgData，imgData）;}）;

 <！ -  Html，其中我保留了图片上传的选项 - >< ul> < li style =margin-top：5px;> .Hii vijay< / li> < li>< input type =fileid =my_filestyle =display：none; />< /锂> < li>< img id =fileuploadname =filetouploadsrc =../../ static / img / img.png>< / li>< / ul>  
 
使用这个脚本，当我点击空图像时（点击这里添加）它正在显示浏览文件选项。选择图像后不会发生任何操作。 
我的要求是从浏览选项中选择图片，所选图片应保存在服务器位置。
      
 
 
 相关模板标记： 
 
 
 < input type ='file'id =imageInputname =imageInputaccept =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控制器：
 
 
 $ b 
  //相关代码
 //文件上传处理
文件， header，er：= this.GetFile（imageInput）
 if file！= nil {
 //一些助手
 //获取文件的扩展名（importpath / filepath为此）
扩展名：= filepath.Ext（header.Filename）
 //完整文件名
 fileName：= header.Filename 
 //保存到服务器` 
 err：= this.SaveToFile（imageInput，somePathOnServer）
} 
  

JavaScript ：



一旦更改事件触发新的 FormData 对象正在创建。文件数据被附加到表单对象，最后代码使用Ajax执行POST请求。

$ b Beego控制器：

通过使用 .GetFile（）方法和imageInput作为参数是HTML输入控制元素，您可以获取文件数据。通过使用 .SaveToFile（）方法并使用imageInput


$ c $>和路径作为参数，您可以将文件保存到服务器。

注意此指控制器。我使用 func（this * MainController）ControllerName（）创建我的Beego控制器

I have an beego application in which i have a requirement of uploading a image from client for to server location.

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

using this script, when i click on empty image(click here to add) it is displaying a browse file option.After selecting the image no action taking place. My requirement is on selection of image from browse option, the selected image should be saved in server location.

解决方案

See additional notes on bottom...

Relevant template markup:

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

Relevant 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 handling the upload:

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

Once the change event fires a new FormData object is being created. The file data is being appended to the form object, finally the code executes a POST request using Ajax.

Beego controller:

By using the .GetFile() method with "imageInput" as argument which is the HTML input control element you can get the file data.

By using the .SaveToFile() method with "imageInput" and a path as arguments, you can save the file to the server.

Note this refers to the controller. I create my Beego controllers using func (this *MainController) ControllerName ()

这篇关于获取图像并将其上传/保存到服务器位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！