jak określić dane binarne w funkcji posta jquery

Question

Mam zrzut ekranu jako ciąg binarny. Chciałbym opublikować niektóre dane na serwerze za pomocą funkcji $ .post().

Mój kod:

var filename = "screenshot.jpg": 
var filedataUrl = "";// string like 'data:image/jpeg;base64,/9j/4A .....' 

$.post(serverUrl, { 
title: title 
name: name 

/*here must be my file */ 

}, function(response) { 
       alert('ok'); 
}); 

Jak mogę określić jako parametr załączonym pliku?

Answer 1

Będziesz musiał zrobić kilka rzeczy.

Najpierw należy zlikwidować plik filedataUrl. Chcesz tylko dane base64, a nie resztę. Następnie użyj metod w Base64 encoding and decoding in client-side Javascript, aby base64 dekodować ciąg do zmiennej przechowującej dane binarne.

Następnie umieść tę zmienną w żądaniu wpisu.

Answer 2

Nie sądzę, że możesz przesłać obraz za pomocą nazwy pliku. Może być konieczne utworzenie formularza z elementem wejściowym do pliku, w którym użytkownik może wybrać plik (nie przez javascript).

Następnie prześlij formularz za pomocą AJAX.

Answer 3

Zastosowanie data

Przykład:

$.post({ 
    url: serverUrl, 
    data: { 
    'fileasstring': filedataUrl 
    }, 
    success: function(response) { 
    alert('ok'); 
    } 
}); 

Patrz: http://api.jquery.com/jQuery.post/

Answer 4

Technicznie base64 jest reprezentacja tekst danych binarnych - jeśli są w porządku z tego powyższe odpowiedzi są prawidłowe. Jeśli chcesz wysłać prawdziwe dane binarne, musisz użyć FormData.

Jeśli poprawnie odczytuję twoje pytanie, zapisujesz html "zrzut ekranu" w elemencie canvas. Jeśli tak, zamiast przeczytać toDataURL, powinieneś użyć toBlob. To daje dane binarne, które możemy wysłać za pomocą FormData

var form = new FormData(); 

form.append('image', blob, 'image.jpg'); 

powyżej można wysłać za pomocą regularnych XMLHttpRequest:

var request = new XMLHttpRequest(); 

request.open('POST', 'http://foo.com/submitform.php'); 
request.send(form); 

przykład roboczych ->codepen

Jeśli będziesz wyglądać na chromowane inspektora zobaczysz, że zostało utworzone poprawne żądanie wieloczęściowe:

------WebKitFormBoundaryGWsPW93HnMPQFcXB 
Content-Disposition: form-data; name="image"; filename="image.jpg" 
Content-Type: image/jpeg 

------WebKitFormBoundaryGWsPW93HnMPQFcXB-- 

Można również wysłać powyżej formularza z jQuery:

$.ajax({ 
    url: 'http://foo.com/submitform.php', 
    type: 'POST', 
    data: form, 
    processData: false, 
    contentType: false 
}); 

Aktualizacja

prostu zobaczyłem zawiadomienie o obsługę wysyłania pliku po stronie serwera w PHP. Przesłany plik jest dostępny w tablicy $ _FILES:

<?php 
    $uploaddir = '/var/www/uploads/'; 
    $uploadfile = $uploaddir . basename($_FILES['image']['name']); 
    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) { 
     echo "File was successfully uploaded.\n"; 
    } else { 
     echo "Error"; 
    } 
    echo 'File info:'; 
    print_r($_FILES); 
?> 

Answer 5

base64 zakodowany obraz jest normalny ciąg. Możesz przekazać go jako data do POST jQuery.

To będzie jak poniżej.

var filename = "screenshot.jpg": 
var filedataUrl = "";// string like 'data:image/jpeg;base64,/9j/4A .....' 

$.post(serverUrl, { 
    title: title, 
    name: name, 
    image: filedataUrl, 
}) 
.done(function(res){ 
    alert('ok') 
})