🚀 go-pugleaf

W dniu poniedziałek, 27 kwietnia 2015 15:02:54 UTC+2 użytkownik Jakub napisał:
> Witam
> 
> Mam taki kod w html:
> 
> <div id="aimg">
>     <img src="plki.jpg">
>     <img src="pik02.jpg">
>     <img src="pik03.jpg">
>     <img src="pik04.jpg">
> </div>
> 
> 
> <script>
> //pobranie w js kolekcji typu img
> var aimg = document.getElementById("aimg");
> var ilosc = aimg.getElementsByTagName("img");
> 
> //jak skonwertować kolekcję typu img na formData?
> //jak za pomocą js sformatować objekt typu formData aby przygotować 
> formularz typu "post" do wysłania.
> 
> var fData = new FormData();
> 
> fData.append('photos[]', file, file.name);   ???
>   fData.append('photos[]', arsc, file.id);   ??
> 
> 
> // Set up the request.
> var xhr = new XMLHttpRequest();
> 
> // Open the connection.
> xhr.open('POST', 'jakisplik.html', true);
> 
> // Set up a handler for when the request finishes.
> xhr.onload = function () {
>     if (xhr.status === 200) {
>      // File(s) uploaded.
> //     s = xhr.responseText
>    }
> };
> 
> // Send the Data.
> xhr.send(fData);
> 
> </script>
> 
> Jakub

Napisz troszkę jaśniej,
czyli - user załadował html z treścią:

<div id="aimg">
    <img src="plki.jpg">
    <img src="pik02.jpg">
    <img src="pik03.jpg">
    <img src="pik04.jpg">
</div>

i co teraz chcesz uzyskać:
1. tą listę plików .jpg (tekst) do wysłania na serwer poprzez inputa
   w formularzu?
2. właśnie te obrazki z komputera usera mają być wysłane na serwer.

No, nie wiadomo jaki jest twój cel.

Andrzej.

W dniu poniedziałek, 27 kwietnia 2015 15:02:54 UTC+2 użytkownik Jakub napisał:
> Witam
> 
> Mam taki kod w html:
> 
> <div id="aimg">
>     <img src="plki.jpg">
>     <img src="pik02.jpg">
>     <img src="pik03.jpg">
>     <img src="pik04.jpg">
> </div>
> 
> 
> <script>
> //pobranie w js kolekcji typu img
> var aimg = document.getElementById("aimg");
> var ilosc = aimg.getElementsByTagName("img");
> 
> //jak skonwertować kolekcję typu img na formData?
> //jak za pomocą js sformatować objekt typu formData aby przygotować 
> formularz typu "post" do wysłania.
> 
> var fData = new FormData();
> 
> fData.append('photos[]', file, file.name);   ???
>   fData.append('photos[]', arsc, file.id);   ??
> 
> 
> // Set up the request.
> var xhr = new XMLHttpRequest();
> 
> // Open the connection.
> xhr.open('POST', 'jakisplik.html', true);
> 
> // Set up a handler for when the request finishes.
> xhr.onload = function () {
>     if (xhr.status === 200) {
>      // File(s) uploaded.
> //     s = xhr.responseText
>    }
> };
> 
> // Send the Data.
> xhr.send(fData);
> 
> </script>
> 
> Jakub

Jeżeli korzystasz z Ajaxa to po co Ci formularz?
Coś mi się wydaje, ze chcesz wysłać te obrazki. Wykorzystaj filereader do odczytu plików.

Paweł

znalazłem rozwiązanie

kod html

<div id="aimg">
    <img src="plki.jpg" id="plki.jpg">
    <img src="pik02.jpg" id="pik02.jpg">
    <img src="pik03.jpg id="pik03.jpg"">
    <img src="pik04.jpg" id="pik04.jpg">
</div>


<script>
//pobranie w js kolekcji typu img
var aimg = document.getElementById("aimg");
//
var ilosc = aimg.getElementsByTagName("img");

//funkcja która zamienia wartość z html IMG src na blob;
function dataURItoBlob(dataURI){
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++){
   ia[i] = byteString.charCodeAt(i);
}
var bb = new Blob([ab], { "type": mimeString });
return bb;
}

var files = im;
// tworzy nowy  FormData object.
var formData = new FormData();

// petla z kolejnymi wartościami IMG
for (var i = 0; i < files.length; i++) {
   var file = files[i];

//zamiana zrodla z img src="" na wartość blob
   blob = dataURItoBlob(file.src);

//przypisanie wartoosci blob i nazwy pliku z ID do fourmurza
  formData.append("photos[]", blob, file.id);

}
// Set up the request.
var xhr = new XMLHttpRequest();

// Open the connection.
xhr.open('POST', 'jsformdata001fb.html', true);

// Set up a handler for when the request finishes.
xhr.onload = function () {
    if (xhr.status === 200) {
     // File(s) uploaded.
     uploadButton.innerHTML = 'Upload';
     s = xhr.responseText

       } else {
     alert('An error occurred!');
   }
};

// Send the Data.
xhr.send(formData);


i po kłopocie

Jakub 

W dniu środa, 29 kwietnia 2015 09:52:08 UTC+2 użytkownik Jakub napisał:
> znalazłem rozwiązanie
> 
> kod html
> 
> <div id="aimg">
>     <img src="plki.jpg" id="plki.jpg">
>     <img src="pik02.jpg" id="pik02.jpg">
>     <img src="pik03.jpg id="pik03.jpg"">
>     <img src="pik04.jpg" id="pik04.jpg">
> </div>
> 
> 
> <script>
> //pobranie w js kolekcji typu img
> var aimg = document.getElementById("aimg");
> //
> var ilosc = aimg.getElementsByTagName("img");
> 
> //funkcja która zamienia wartość z html IMG src na blob;
> function dataURItoBlob(dataURI){
> var byteString = atob(dataURI.split(',')[1]);
> var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
> var ab = new ArrayBuffer(byteString.length);
> var ia = new Uint8Array(ab);
> for (var i = 0; i < byteString.length; i++){
>    ia[i] = byteString.charCodeAt(i);
> }
> var bb = new Blob([ab], { "type": mimeString });
> return bb;
> }
> 
> var files = im;
> // tworzy nowy  FormData object.
> var formData = new FormData();
> 
> // petla z kolejnymi wartościami IMG
> for (var i = 0; i < files.length; i++) {
>    var file = files[i];
> 
> //zamiana zrodla z img src="" na wartość blob
>    blob = dataURItoBlob(file.src);
> 
> //przypisanie wartoosci blob i nazwy pliku z ID do fourmurza
>   formData.append("photos[]", blob, file.id);
> 
> }
> // Set up the request.
> var xhr = new XMLHttpRequest();
> 
> // Open the connection.
> xhr.open('POST', 'jsformdata001fb.html', true);
> 
> // Set up a handler for when the request finishes.
> xhr.onload = function () {
>     if (xhr.status === 200) {
>      // File(s) uploaded.
>      uploadButton.innerHTML = 'Upload';
>      s = xhr.responseText
> 
>        } else {
>      alert('An error occurred!');
>    }
> };
> 
> // Send the Data.
> xhr.send(formData);
> 
> 
> i po kłopocie
> 
> Jakub

Ciekawe z tym blobem, słyszałem ale nie było mi (do tej pory) potrzebne.
Jeżeli Twój przypadek jest rzeczywisty to wynika z niego że na serwerze masz pliki jpg które ściągasz do bloba po to żeby znów wysłać (z powrotem) na serwer, czyli w to samo miejsce.
W tym przypadku chyba lepiej wysłać samą nazwę pliku?

Paweł

W dniu środa, 29 kwietnia 2015 09:52:08 UTC+2 użytkownik Jakub napisał:
> znalazłem rozwiązanie
> 
> kod html
> 
> <div id="aimg">
>     <img src="plki.jpg" id="plki.jpg">
>     <img src="pik02.jpg" id="pik02.jpg">
>     <img src="pik03.jpg id="pik03.jpg"">
>     <img src="pik04.jpg" id="pik04.jpg">
> </div>
> 
> 
> <script>
> //pobranie w js kolekcji typu img
> var aimg = document.getElementById("aimg");
> //
> var ilosc = aimg.getElementsByTagName("img");
> 
> //funkcja która zamienia wartość z html IMG src na blob;
> function dataURItoBlob(dataURI){
> var byteString = atob(dataURI.split(',')[1]);
> var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
> var ab = new ArrayBuffer(byteString.length);
> var ia = new Uint8Array(ab);
> for (var i = 0; i < byteString.length; i++){
>    ia[i] = byteString.charCodeAt(i);
> }
> var bb = new Blob([ab], { "type": mimeString });
> return bb;
> }
> 
> var files = im;
> // tworzy nowy  FormData object.
> var formData = new FormData();
> 
> // petla z kolejnymi wartościami IMG
> for (var i = 0; i < files.length; i++) {
>    var file = files[i];
> 
> //zamiana zrodla z img src="" na wartość blob
>    blob = dataURItoBlob(file.src);
> 
> //przypisanie wartoosci blob i nazwy pliku z ID do fourmurza
>   formData.append("photos[]", blob, file.id);
> 
> }
> // Set up the request.
> var xhr = new XMLHttpRequest();
> 
> // Open the connection.
> xhr.open('POST', 'jsformdata001fb.html', true);
> 
> // Set up a handler for when the request finishes.
> xhr.onload = function () {
>     if (xhr.status === 200) {
>      // File(s) uploaded.
>      uploadButton.innerHTML = 'Upload';
>      s = xhr.responseText
> 
>        } else {
>      alert('An error occurred!');
>    }
> };
> 
> // Send the Data.
> xhr.send(formData);
> 
> 
> i po kłopocie
> 
> Jakub


A może tak też się da to samo:

<div id="aimg">
    <img src="plki.jpg" id="plki.jpg"> 
    <img src="pik02.jpg" id="pik02.jpg"> 
    <img src="pik03.jpg id="pik03.jpg""> 
    <img src="pik04.jpg" id="pik04.jpg"> 
</div> 


<script>

var ob = document.getElementsByTagName("img");

lista='';
for(i=0;i<ob.length;i++)
{
 lista+=ob[i].src+';<br>\n';
}

alert(lista);

</script>

a potem split i dalej już z każdą pozycją
robisz na serwerze co chcesz.


Andrzej.