2017-03-03 5 views
0

イメージをサーバーにアップロードすると、画像がサーバーからAJAX、サーバーサイドでPythonフラスコフレームワークを使用してポストします。 javascriptを使用して、イメージをbase64形式に変換します。あなたはBASE64で画像を取得することができ、このようなポストbase64 javascriptを使用してサーバーに画像を符号化

\t $('.img-upload-btn').click(function(event) { 
 
\t \t $("#img-upload").click(); 
 
\t }); 
 

 
\t $('#img-upload').on('change', function(event) { 
 
\t \t event.preventDefault(); 
 
\t \t var img = $("#img-upload")[0].files[0]; 
 
\t \t console.log(toDataUrl(img.name)); 
 

 
\t \t var img_data = { 
 
\t \t \t "spec_id": 212, 
 
\t \t \t "file": img 
 
\t \t }; 
 
\t \t console.log(img); 
 
\t \t $.ajax({ 
 
\t \t \t url: 'http://10.0.0.75:5000/api/check_specification', 
 
\t \t \t type: 'POST', 
 
\t \t \t dataType: 'json', 
 
\t \t \t contentType: "application/json; charset=utf-8", 
 
\t \t \t success: function(data) { 
 
\t \t \t \t alert(data); 
 
\t \t \t }, 
 

 
\t \t \t failure:function(errorMsg) { 
 
\t \t \t \t alert(errorMsg); 
 
\t \t \t } 
 
\t \t }); 
 
\t \t 
 
\t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn-search full-width img-upload-btn">upload-img</button> 
 
<input type="file" id="img-upload" >

+0

可能な重複[あなたがJavaScriptでのBase64に文字列をエンコードするにはどうすればよい?](http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64 -in-javascript) –

答えて

2

何か。

fileChange(e) { 
    /* any way to get the object input */ 
    var file = document.querySelector('input[type=file]'); 
    let reader = new FileReader(); 
    if(file.files[0]) { 
     reader.onload =() => { 
     imgBase64 = reader.result; 
     console.log(reader.result); 
     //your request 
     } 
     reader.readAsDataURL(file[0]); 
    } 
} 
+0

あなたの答えは正しいです! – flypan

関連する問題