2012-06-15 17 views
12

Lassen Sie mich wissen, wenn jemand weiß, was das Problem mit diesem Code ist.PHP-Datei-Upload mit jquery Beitrag

Grundsätzlich möchte ich eine Datei

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(event) { 
     $('#form1').submit(function(event) { 
     event.preventDefault(); 
     $.post('post.php',function(data){ 
      $('#result').html(data); 
     }); 
     }); 
    }); 
    </script> 
</head> 
<body> 
<form id="form1"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html> 

und meine php 'post.php'

<?php 
    echo $file['tmp_name']; 
?> 

Hochgeladen Dateiname zurückgegeben wird, nicht wieder mit jQuery

hochladen. Problem ist, dass ich nicht auf die hochgeladene Datei zugreifen konnte.

Vielen Dank im Voraus! Shiv

+0

was machst du –

Antwort

16

Grundsätzlich verwenden i jQuery

mit einer Datei hochladen möchten

Sie können keine Dateien hochladen AJAX . Sie könnten die jquery.form-Plugin verwenden, die einen versteckten iFrame verwendet:

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(event) { 
      $('#form1').ajaxForm(function(data) { 
       $('#result').html(data); 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form id="form1" action="post.php" method="post" enctype="multipart/form-data"> 
    <h3>Please input the XML:</h3> 
    <input id="file" type="file" name="file" /><br/> 
    <input id="submit" type="submit" value="Upload File"/> 
</form> 

<div id="result">call back result will appear here</div> 

</body> 
</html> 

Beachten Sie auch die enctype="multipart/form-data" auf dem Formular.

Eine andere Möglichkeit ist die Verwendung der HTML5 File API, die Sie erreichen können, wenn der Client-Browser dies unterstützt.

+0

Meinten Sie, Sie können keine Dateien mit AJAX hochladen oder Sie können keine Dateien mit jQuerys post() -Methode hochladen? –

5

Nein, nein, Sie sollten ein jQuery-Form-Plugin für asynchronen Hochladen von Dateien verwenden. Sie können keine Datei mit der Methode jQuery $ .post hochladen. Die Datei wird mit versteckten iframe hochgeladen werden

Ein anderer Weg ist HTML5-Upload mit FileAPI/BlobApi

+0

Dank mate! Für jetzt werde ich nur mit normalen HTML-Formular senden statt Jquery Post gehen. So funktioniert es für mich! – Shiv

0

Versuchen Sie, mit einem iframe hochzuladen, da Sie keine Datei mit $ .post-Methode senden können.

-1

Sie könnten auch versuchen, jquery Uploadify - http://www.uploadify.com/

+0

Warum werden Sie mit einer externen Bibliothek gehen, wenn der Browser eine API dafür hat? – Heitara

+0

Da wir vor langer Zeit über das Hochladen von Dateien sprachen, würde ich ein Jahrhundert oder mehr in Bezug auf die Entwicklung neuer Technologien sagen. Als ich vorschlug, dass es kein html5 gab oder es gerade anfing und irgendetwas mehr als reines html erforderte, blitzte (meistens).Uploadify war eine ziemlich gute Bibliothek in dieser Zeit und unter anderen Features angeboten Fortschrittsbalken, mehrere Dateien hochladen, Drag & Drop und wenn ich mich richtig erinnere war Jquery basiert. – norbi771

6

Es ist nicht möglich, Dateien mit jQuery $ .post hochladen, Neverthless, mit der Datei API und XMLHttpRequest, es durchaus möglich ist, eine Datei in AJAX zu laden, und Sie können wissen Sie sogar, wie viele Daten noch hochgeladen wurden ...

$('input').change(function() 
{ 
    var fileInput = document.querySelector('#file'); 

    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/upload/'); 

    xhr.upload.onprogress = function(e) 
    { 
     /* 
     * values that indicate the progression 
     * e.loaded 
     * e.total 
     */ 
    }; 

    xhr.onload = function() 
    { 
     alert('upload complete'); 
    }; 

    // upload success 
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
    { 
     // if your server sends a message on upload sucess, 
     // get it with xhr.responseText 
     alert(xhr.responseText); 
    } 

    var form = new FormData(); 
    form.append('title', this.files[0].name); 
    form.append('pict', fileInput.files[0]); 

    xhr.send(form); 
} 
+0

Leider ist die Unterstützung für XHR2 noch nicht gut. Aber danke für Ihre Hilfe, ich habe es geschafft, einen vollständigen Test mit Zepto und einigen falschen Daten zu erstellen, indem ich diesen Ansatz nutze. –

+0

Alle aktuellen großen Browser-Versionen unterstützen es (sogar IE 10+). http://caniuse.com/xhr2 – Buzut

0

Ihre upload.php hat einen Fehler.

sollten Sie dieses Teil ändern.

echo $file['tmp_name']; 

zu: -

echo $_FILES['file']['tmp_name'];