jQuery-Ajax-Datei-Upload (PHP)

So implementieren Sie den Ajax-Datei-Upload von jQuery, PHP-getreuen Datei-Upload.
AJAX-Upload-Datei, PHP-Upload-Datei.

[PHP-Datei-Upload]

Bevor ich anfange, halte ich es für notwendig, das Prinzip des Hochladens von Dateien über das WEB kurz zu erläutern.
Ob es nun PHP, JSP oder ASP ist, das die hochgeladenen Dateien hier verarbeitet, das WEB hat die Dateien bereits auf den Server hochgeladen. Wir verwenden lediglich die Upload-Verarbeitungsfunktion, um die hochgeladenen Dateien zu verarbeiten.
Die Verarbeitungsfunktionen werden im Allgemeinen mithilfe serverseitiger Sprachen wie PHP, JSP und ASP implementiert. Wie lädt man also Dateien über WEB (HTTP-Protokoll?) hoch? Sie benötigen einen HTML-Code ähnlich dem folgenden:
test.html

<form action="do_file_upload.php" method="post" enctype="multipart/form-data">
<p>Pictures:
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>

Hinweis: enctype="multipart/form-data", ja Erforderlich , teilt es der FORM-Tabelle mit, dass es sich um einen Datei-Upload-Typ handelt. Sobald die Anfrage erfolgreich ist, wird die Datei in den temporären Ordner des Servers hochgeladen.
Wie die Datei nach Erreichen des Ziels verarbeitet wird nur eine Frage von PHP, JSP und ASP.
(Seien Sie jedoch nicht zu früh zu glücklich. Wenn die Datei nicht an andere Orte verschoben oder umbenannt wird, wird die Datei am Ende der Formularanforderung gelöscht. Wir müssen also ein Skript schreiben, um das Hochladen zu verarbeiten Dateien)
Hier verwenden wir PHP, um
do_file_upload.php zu verarbeiten

<?php
$error = ""; //上传文件出错信息
$msg = "";
$fileElementName = &#39;picture&#39;;
    $allowType = array(".jpg",".gif",".png"); //允许上传的文件类型
    $num      = strrpos($_FILES[&#39;picture&#39;][&#39;name&#39;] ,&#39;.&#39;);  
$fileSuffixName    = substr($_FILES[&#39;picture&#39;][&#39;name&#39;],$num,8);//此数可变  
$fileSuffixName    = strtolower($fileSuffixName); //确定上传文件的类型

$upFilePath             = &#39;d:/&#39;; //最终存放路径
if(!empty($_FILES[$fileElementName][&#39;error&#39;]))
{
   switch($_FILES[$fileElementName][&#39;error&#39;])
   {
    case &#39;1&#39;:
     $error = &#39;传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值&#39;;
     break;
    case &#39;2&#39;:
     $error = &#39;上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值&#39;;
     break;
    case &#39;3&#39;:
     $error = &#39;文件只有部分被上传&#39;;
     break;
    case &#39;4&#39;:
     $error = &#39;没有文件被上传&#39;;
     break;
    case &#39;6&#39;:
     $error = &#39;找不到临时文件夹&#39;;
     break;
    case &#39;7&#39;:
     $error = &#39;文件写入失败&#39;;
     break;
    default:
     $error = &#39;未知错误&#39;;
   }
}elseif(empty($_FILES[&#39;fileToUpload&#39;][&#39;tmp_name&#39;]) || $_FILES[&#39;fileToUpload&#39;][&#39;tmp_name&#39;] == &#39;none&#39;)
{
   $error = &#39;没有上传文件.&#39;;
}else if(!in_array($fileSuffixName,$allowType))
{
   $error = &#39;不允许上传的文件类型&#39;; 
}else{
  );
   if($ok === FALSE){
    $error = &#39;上传失败&#39;;
   }
}
?>

Noch ein Hinweis: Über das $_FILES-Array

Dieses Array enthält alle hochgeladenen Dateiinformationen , aufgezeichnete Informationen beim Hochladen von Dateien.
Der Inhalt des $_FILES-Arrays im obigen Beispiel ist wie folgt. Nehmen wir an, dass der Name des Datei-Upload-Felds „userfile“ lautet, wie im obigen Beispiel gezeigt. Der Name kann beliebig sein.

$_FILES['userfile']['name']
Der ursprüngliche Name der Client-Maschinendatei.

$_FILES['userfile']['type']
Der MIME-Typ der Datei, wenn der Browser diese Informationen bereitstellt. Ein Beispiel ist „image/gif“. Allerdings wird dieser MIME-Typ auf PHP-Seite nicht überprüft, Sie sollten ihn also nicht als selbstverständlich ansehen.

$_FILES['userfile']['size']
Die Größe der hochgeladenen Datei in Bytes.

$_FILES['userfile']['tmp_name']
Der temporäre Dateiname, der nach dem Hochladen der Datei auf dem Server gespeichert wird.

$_FILES['userfile']['error']
Fehlercode im Zusammenhang mit dem Datei-Upload. Dieses Projekt wurde in PHP Version 4.2.0 hinzugefügt.

[AJAX-Datei-Upload]

Tatsächlich geht es darum, einen aktualisierungsfreien Datei-Upload zu erreichen. Es kann das IFRAME-Datei-Upload-Prinzip genutzt werden.
Eigentlich beim Hochladen von Dateien mit PHP. . . Es kann nur das $_FILES-Format verwendet werden, aber wenn wir nur JS verwenden, um seine ID zu erhalten, wie zum Beispiel 0e39c88a1681b66ead6507306c8fb071..document.getElementById('img').value oder jquery $("#img") im Formular kann nicht tatsächlich hochgeladen werden (aber es gibt immer noch viele Leute, die das tun, darunter auch ich am Anfang).
Aber die Funktion erfordert auch die Implementierung des sogenannten „asynchronen Uploads“, was soll ich tun? ? Sie können nur Komponenten von Drittanbietern verwenden oder selbst eine schreiben (einen IFRAME in die Webseite einbetten). Wenn Sie jedoch über die Entwicklungszeit nachdenken, können Sie eine gute jQuery-Ajax-Datei-Upload-Komponente verwenden, nämlich „ajaxfileupload.js“. Die Download-Adresse der Komponente lautet: http://www.phpletter.com/. Nach dem Herunterladen befindet sich eine PHP-Anwendungsdemo im Inneren, die leicht zu verstehen ist.
Prozess:
(1) Der Code der Datei im Frontend: test.php

    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="ajaxfileupload.js"></script>
    <script type="text/javascript">
       function ajaxFileUpload()
               {
                  $.ajaxFileUpload
                     (
                       {
                            url:&#39;doajaxfileupload.php&#39;, //你处理上传文件的服务端
                            secureuri:false,
                            fileElementId:&#39;img&#39;,
                            dataType: &#39;json&#39;,
                            success: function (data)
                                  {
                                    alert(data.file_infor);
                                  }
                               }
                         )
                       return false;
                 } 
     </script>

Der entsprechende HTML-Code lautet:

        <input id="img" type="file" size="45" name="img" class="input">
        <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

Auf diese Weise , der Client ist fertig.

(2) Auf der Serverseite doajaxfileupload.php

Um leicht zu erkennen, ob der Wert tatsächlich übergeben wird, können Sie ihn speichern.
                                                                                                                            Jetzt kommen die bekannten Informationen:

Die eigentliche Verarbeitung ist natürlich ähnlich:

     array(
             'name'=>'lamp.jpg',
             'type'=>'image/pjpeg',
             'tmp_name'=>'c:\windows\temp\phpFA.tmp',
             'error'=>0,
             'size'=>3127
         )

Noch ein Hinweis: Tatsächlich können Sie einen IFRAME einbetten Verwenden Sie dann das native POST-Formular zum Senden in IFRAME. Das JQUERY-Plug-in verwendet diese Methode ebenfalls. Es handelt sich lediglich um einen dynamisch generierten IFRAME und ein Formular.

   <?php
     $upFilePath = "d:/";
     );
   if($ok === FALSE){
    echo json_encode(&#39;file_infor&#39;=>&#39;上传失败&#39;);
   }else{
    echo json_encode(&#39;file_infor&#39;=>&#39;上传成功&#39;);
   }
   ?>

Weitere Artikel zum Hochladen von jQuery-Ajax-Dateien (PHP) finden Sie auf der chinesischen PHP-Website!