Javascript 获取图像并将其上传/保存在服务器位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30795620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get image and upload/save it in server location
提问by vkc
I have an beego application in which i have a requirement of uploading a image from client for to server location.
我有一个 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>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.
使用此脚本，当我单击空图像（单击此处添加）时，它会显示浏览文件选项。选择图像后，不会发生任何操作。我的要求是从浏览选项中选择图像，所选图像应保存在服务器位置。
采纳答案by Stef K
See additional notes on bottom...
请参阅底部的附加说明...
Relevant template markup:
相关模板标记：
<input type='file' id="imageInput" name="imageInput" accept="image/*"/>
Relevant JavaScript:
相关 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:
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:
JavaScript:
Once the changeevent fires a new FormDataobject is being created. The file data is being appended to the form object, finally the code executes a POST request using Ajax.
一旦change事件触发，就会创建一个新的FormData对象。文件数据被附加到表单对象，最后代码使用 Ajax 执行 POST 请求。
Beego controller:
Beego控制器：
By using the .GetFile()method with "imageInput"as argument which is the HTML input control element you can get the file data.
通过使用.GetFile()带有"imageInput"as 参数的方法，它是 HTML 输入控件元素，您可以获得文件数据。
By using the .SaveToFile()method with "imageInput"and a path as arguments, you can save the file to the server.
通过使用.SaveToFile()with"imageInput"和 path 作为参数的方法，您可以将文件保存到服务器。
Note thisrefers to the controller. I create my Beego controllers using func (this *MainController) ControllerName ()
注意this是指控制器。我创建我的 Beego 控制器使用func (this *MainController) ControllerName ()
回答by Mahesh Jasti
localStorage that you are using is something like cookies and would never be saved in server. It is per domain saved on the client side.
您使用的 localStorage 类似于 cookie，永远不会保存在服务器中。它是保存在客户端的每个域。
Also when you want to save the bit to server, you need to do a form post and you should be having some sort of server side code with handles the saving part like where to save and in which format.
此外，当您想将位保存到服务器时，您需要进行表单发布，并且您应该拥有某种服务器端代码来处理保存部分，例如保存位置和保存格式。
Try exploring Php or ASP.NET or Jsp file upload - saving on server. With out server side code it would not be possible to push data using HTML and Javascript alone, as they are only client side scripts.
尝试探索 Php 或 ASP.NET 或 Jsp 文件上传 - 保存在服务器上。如果没有服务器端代码，就不可能单独使用 HTML 和 Javascript 推送数据，因为它们只是客户端脚本。
Update 1:html
更新 1:html
<form action="/post/save" method="POST" enctype="multipart/form-data">
<input type="file" name="images">
</form>
Controller
控制器
file, header, err := this.GetFile("images")
if err != nil {
log.Println("error", err)
} else {
log.Println("filename", header.Filename)
}
Try some docs on Beego GetFilemethod. But there seems to be a limitation there like by default, you cannot handle multiple uploaded files at a time.
尝试一些关于Beego GetFile方法的文档。但似乎有一个限制，例如默认情况下，您不能一次处理多个上传的文件。
