Forum PHP.pl > advAJAX i przesyłanie plików

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: advAJAX i przesyłanie plików

Edric

10.06.2008, 16:23:54

Witam.
Staram się w swoim projekcie zastosować przesyłanie plików na serwer bez przeładowywania strony. Chciałem do tego wykorzystać bibliotekę advAJAX. Kod na którym eksperymentuje, wygląda następująco:

formularz.html:

[HTML] pobierz, plaintext 
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" src="advajax.js"></script>
 
<script type="text/javascript"> 
 
window.onload = przeslij;
 
function przeslij() 
{
 advAJAX.assign(document.getElementById("form_1"), {  
     onSuccess : function(obj) {
     document.getElementById("info").innerHTML = obj.responseText;
     }
 });
}
</script>
</head>
 
<body>
 
<form method="post" enctype="multipart/form-data" action="plik.php" id="form_1">
Plik:<br />
<input type="file" name="nazwa" /><br />
<input type="submit" value="OK" />
</form>
 
<span id="info" style="display: block"></span>
 
</body>
</html>
[HTML] pobierz, plaintext

plik.php:

[PHP] pobierz, plaintext 
<?
var_dump($_FILES);
?>
[PHP] pobierz, plaintext

Wywołanie window.onload = przeslij; sprawia, że obsługę formularza przejmuje advAJAX. Gdy wywołanie to jest aktywne, to jako odpowiedź otrzymuję: "array(0) { }",
czyli php nie stwierdziło żadnych plików do przesłania. Gdy wywołanie window.onload = przeslij; usuwam, formularz obsługiwany jest standardowo i po otwarciu nowej strony mam:

array(1) { ["username"]=> array(5) { ["name"]=> string(15) "Clipboard01.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(74) "C:\Documents and Settings\Edric\Ustawienia lokalne\Temp\php218.tmp" ["error"]=> int(0) ["size"]=> int(250548) }

czyli formularz działa prawidłowo. Wygląda na to, że advAJAX nie potrafi obsługiwać przesyłania plików.. albo ja robie coś źle. I tu pytanie - co zrobić żeby to zadziałało? Dodam jeszcze, że jeśli zmienię typ input na 'text', i sprawdzę zmienną $_POST po przesłaniu za pomocą advAJAX to wszystko działa dobrze.

Może zna ktoś jakiś inny obiekt AJAX, który pomógłby mi to zrealizować?

Próbowałem problem rozwiązać w inny sposób, ale na drodze stanęła mi Opera i jej obsługa inputów dla plików (pytanie na ten temat również znajduje się na forum.

Bardzo proszę o pomoc, bo naprawdę nie wiem jak ten problem rozwiązać.

Niestety nie wiem, jak to wygląda z advAJAX, ale znalazłem coś co prawdopodobnie rozwiązuje ten problem:

http://en.dklab.ru/lib/JsHttpRequest/" title="Zobacz w manualu PHP" target="_manual

sowiq

10.06.2008, 17:28:56

NIestety, ale AJAX jak i cała JavaScript nie obsługuje przesyłania plików. Jeśli zależy Ci na przesyłaniu formularza z plikiem bez przeładowania strony, musisz zastosować ukrytą ramkę (np 1px x 1px) i do niej normalnie submitować formularz.

simple programmer

10.06.2008, 18:38:40

Nie działa, bo w ten sposób normalnie mógłbyś przeglądać sobie kompa użytkownika, a tego byś jako przeglądający przecież nie chciał.

Edric

11.06.2008, 12:17:43

Cytat(sowiq @ 10.06.2008, 18:28:56 )

Ajax czy też JS jako taki nie. Ale jak widać w moim przykładowym kodzie, AJAX potrafi wywoływać asynchroniczie kod PHP, który wysyłaniem plików spokojnie może się zająć (do tego ma przecież zmienną $_FILES). No i istnieje coś takiego jak <input type='file'/> co pozwala na pobranie nazwy pliku z dysku lokalnego za pomocą przeglądarki. Problem tkwił w tym, że biblioteka, z której korzystałem (advAJAX) akurat z przesyłaniem plików sobie nie radzi. Niemniej znalazłem bibliotekę która to umożliwia - http://en.dklab.ru/lib/JsHttpRequest . Jak znajdę chwilę czasu to wrzucę tu kod pozwalający z jej pomocą na kopiowanie plików na serwer bez przeładowywania strony i bez ukrytych ramek.

Cytat(simple programmer @ 10.06.2008, 19:38:40 )

Nie działa, bo w ten sposób normalnie mógłbyś przeglądać sobie kompa użytkownika, a tego byś jako przeglądający przecież nie chciał.

Niestety nie rozumiem... Kod który piszę, ma pozwalać na przesłanie pliku z dysku lokalnego na serwer, bez przeładowania strony. Przeglądanie własnego dysku, to chyba nie problem - umożliwia to input z type='file'.

wlamywacz

12.06.2008, 22:07:20

Nie zrobisz tego w ten sposób po prostu - względy bezpieczeństwa. Jedyna opcja to perl itp.

P.S. Słyszałem że ustawiając specjalnie FF można to wykonać ale to jak robisz tylko dla siebie.

Edric

14.06.2008, 12:41:00

Cytat(wlamywacz @ 12.06.2008, 23:07:20 )

Nie zrobisz tego w ten sposób po prostu - względy bezpieczeństwa. Jedyna opcja to perl itp.

P.S. Słyszałem że ustawiając specjalnie FF można to wykonać ale to jak robisz tylko dla siebie.

Ale czemu względy bezpieczeństwa? Przecież przesyłanie plików na serwer to normalna sprawa - po to jest input type=file, po to jest m.in. POST, po to jest zmienna $_FILES w PHP. Jedyne co ja chcę zmienić, to wysyłać te pliki bez przeładowania strony.

Zresztą - działa mi to. Poniżej wrzucam kod dla pliku html oraz php. W html są tylko najważniejsze rzeczy - skrypt i formularz. <body> itp sobie darowałem;).

user.html:

[HTML] pobierz, plaintext 
<script src="JsHttpRequest.js"></script>
<script type="text/javascript" language="JavaScript">
function doLoad(value) {
    // Create new JsHttpRequest object.
    var req = new JsHttpRequest();
    // Code automatically called on load finishing.
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            // Write result to page element (_RESULT becomes responseJS). 
            document.getElementById('result').innerHTML = 
                '<b>MD5("'+req.responseJS.q+'")</b> = ' +
                '"' + req.responseJS.md5 + '"<br> ';
            // Write debug information too (output becomes responseText).
            document.getElementById('debug').innerHTML = req.responseText;
        }
    }
    // Prepare request object (automatically choose GET or POST).
    req.open(null, 'serw.php', true);
    // Send data to backend.
    req.send( { q: value } );
}
</script>
 
<!-- Please note that we must specify enctype to multipart/form-data! -->
<form method="post" enctype="multipart/form-data" onsubmit="return false">
    File: <input type="file" name="upl">
    <input type="button" value="Wyślij" 
      onclick="doLoad(this.form.upl)">
</form>
 
<div id="result" style="border:1px solid #000; padding:2px">
    Structured results
</div>
<div id="debug" style="border:1px dashed red; padding:2px">
    Debug info
</div>
[HTML] pobierz, plaintext

serw.php

[PHP] pobierz, plaintext 
<?php
// Load JsHttpRequest backend.
require_once "JsHttpRequest.php";
// Create main library object. You MUST specify page encoding!
$JsHttpRequest =& new JsHttpRequest("UTF-8");
// Store resulting data in $_RESULT array (will appear in req.responseJs).
$GLOBALS['_RESULT'] = array(
  "q"	 => 'file ' . $_FILES['q']['name'],
  "md5"   => md5(@file_get_contents($_FILES['q']['tmp_name'])),
); 
 
$file= $_FILES['q']['tmp_name'];
$zapisz_jako = $_FILES["q"]["name"];
copy($file, $zapisz_jako);
 
// Below is unparsed stream data (will appear in req.responseText).
?>
<pre>
<b>Uploaded files:</b> <?=print_r($_FILES, 1)?>
</pre>
[PHP] pobierz, plaintext

Oczywiście wymagane są pliki JsHttpRequest.js oraz JsHttpRequest.php - wszystko na stronie http://en.dklab.ru/lib/JsHttpRequest/

Mi całość działa w Operze, FF i IE7. W FF nie włączałem żadnych specjalnych opcji - lecę na standardowych ustawieniach.

protheo

10.12.2009, 14:46:47

Cytat(Edric @ 11.06.2008, 12:17:43 )

Widzisz i tu właśnie się mylisz gdybyś przeczytał specyfikację i zaglądnął do kodu z pliku, który podajesz niżej czyli: JsHttpRequest.js, to zobaczyłbyś że tak naprawdę ta biblioteka działa na zasadzie automatycznego wyboru rozwiązania uploadu dla przesyłanych danych. W przpadku plików tworzone jest rozwiązanie w oparciu właśnie o iframe: "Automatic choice of the best AJAX realization (XMLHttpRequest, <script>, <IFRAME>)."

Tak jak pisali wszyscy powyżej niestety nie ma możliwości załadować pliku za pomocą JavaScript, naprawdę długo szukałem takiego rozwiązania.

Wracając do JSHttpRequest i IFRAME poniżej fragmenty z pliku JSHttpRequest.js:

" * This library tries to use XMLHttpRequest (if available), and on
* failure - use dynamically created <script> elements. Backend code
* is the same for both cases. Library also supports file uploading;
* in this case it uses FORM+IFRAME-based loading."
.
.
.

" // Create invisible IFRAME with temporary form (form is used on empty queryElem).
var div = document.createElement('DIV');

var ifname = 'jshr_i_' + id;
"

Z tego co udało mi się ustalić (a i pewnie i to nie jest do końca takie pewne) to są 4 sposoby przesyłania plików bez przeładowania strony:

1. swfupload - czyli upload realizowany z poziomu flasha (podobno nie działa w 10 wersji flash - ale tego nie sprawdzałem),

2. form+ifrme - w sumie kilka sposobów realizacji ale idea generalnie taka sama - form ładowany do iframe,

3. jQuery - tu nie jestem pewien bo to teoretycznie biblioteka JavaScript więc niby też powinien być iframe ale w to się nie zagłębiałem.,

4. Przeładowanie całej strony po uploadzie (pokaz miniatury wykonuje skrypt php w oparciu o zmienne sesji lub zmienne JavaScript, który generuje pierwotny form do wprowadzania danych).

Jeżeli są jakieś inne rozwiązania bardzo chętnie je poznam i na ich temat porozmawiam

w razie czego proszę na priv.

Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.