獲取圖像並上傳/將其保存在服務器位置

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

使用該腳本，當我點擊空圖像（點擊此處添加），它會顯示一個瀏覽文件option.After選擇圖像沒有動作發生。我的要求是從瀏覽選項中選擇圖像，所選圖像應保存在服務器位置。

來源

2015-06-12 vkc

使用了Ajax文件上傳插件，你不能做這樣 https://github.com/jchild3rs/AjaxFileUpload – kaxi1993

@ kaxi1993我Beego控制器，你可以發帖回答這個..因爲我是新手，我現在需要完成這項任務。 – vkc

@ kaxi1993，但因爲我使用beego – vkc

參見下方的其他注意事項...

相關模板標記：

<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"作爲參數，它是HTML輸入控制元件就可以得到文件數據。

通過使用.SaveToFile()方法和"imageInput"以及路徑作爲參數，可以將文件保存到服務器。

注this指控制器。我創建使用func (this *MainController) ControllerName()

來源

2015-06-13 08:06:36

凡使用擴展 – vkc

通過擴展我的意思是文件的擴展名，例如，如果您有要上載的圖像文件''picture.png'是.png'擴展。我已經添加它作爲一個額外的例子... –

得到它。與這裏的一些變化，有沒有定義 – vkc

您使用的localStorage類似於cookies，並且永遠不會保存在服務器中。它是每個域保存在客戶端。

另外，當你想將位保存到服務器時，你需要做一個表單發佈，你應該有一些服務器端代碼，處理保存部分，如保存位置和格式。

嘗試探索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-12 05:14:51

我的NodeJS不能使用這個PHP是服務器端JavaScript，可能對這個問題的最佳解決方案。 – Rob

@Mahesh，因爲我使用Beego作爲我的web框架。是否有任何功能，我只能在beego中實現此功能。 – vkc

在我的答案中找到更新1。 –

獲取圖像並上傳/將其保存在服務器位置

回答

相關問題