Verwenden Sie ajaxfileupload.js, um die Ajax-Upload-Datei PHP version_jquery zu implementieren

Sowohl PHP als auch andere serverseitige Skripte stellen die Funktion zum Hochladen von Dateien bereit und sind relativ einfach zu implementieren. Mithilfe von JavaScript können Sie den Ajax-Datei-Upload implementieren. Obwohl jQuery selbst keine derart vereinfachte Funktion bietet, gibt es viele Plug-Ins, die dies erreichen können. Unter diesen ist ajaxfileupload.js von Phpletter.com ein leichtes Plug-In, dessen Schreibmethode der von jQuery bereitgestellten globalen Methode $.post() sehr ähnlich ist und einfach und benutzerfreundlich ist.
Allerdings ist das Plug-in zu vereinfacht. Zusätzlich zur Bereitstellung des Pfads der hochzuladenden Datei kann es keine zusätzlichen Werte an den Backend-Server übergeben. Also habe ich das Skript geändert und einen Datenobjektparameter hinzugefügt.

1. Prinzip

Ich verwende hier PHP als Serverskript. In fast jedem PHP-freien Buch wird erwähnt, wie die Methode move_uploaded_file() zum Hochladen von Dateien verwendet wird, daher werde ich hier nicht näher darauf eingehen. Was ich sagen möchte, ist, das Prinzip des Ajax-Uploads zu verwenden.
Da ich die jQuery-Bibliothek verwendet habe und an Ajax denke, besteht meine erste Reaktion darin, die Methode $.post() auszuprobieren, jeden Selektor zu verwenden, um den Wert im Dateifeld abzurufen, und ihn dann an den Hintergrundserver zu senden . Natürlich stellte sich später heraus, dass das nicht funktionierte. (Aufgrund dieses Problems habe ich auch viele Informationen überprüft und es sind viele ASP- und andere Skripte online verfügbar. Ich weiß wirklich nicht, was ich sagen soll.)
Zurück zum Thema: Es ist nicht schwierig, den Ajax-Upload zu implementieren, und es gibt viele Methoden. Das in diesem Artikel erwähnte Plugin ajaxfileupload.js von Phpletter.com verwendet iframe. Dies ist auch eine gängige Methode, um das Hochladen ohne Aktualisierung der Seite zu erreichen, wenn keine JavaScript-Skripte verwendet werden. (Dieser Blog verwendet diese Methode, um Protokolle im Hintergrund von bo-blog zu schreiben)
Das Plugin ajaxfileupload.js ist ebenfalls sehr einfach. Es verwendet zunächst den Selektor von jQuery, um den Dateipfadwert im Datei-Upload-Feld abzurufen, erstellt dann dynamisch einen Iframe und erstellt darin ein neues Dateifeld, das eine Post-Methode zum Senden bereitstellt nach Backstage. Abschließend werden die Ergebnisse an die Rezeption zurückgegeben.

2. Verwendung

Die Verwendung des Plug-Ins ajaxfileupload.js ist sehr einfach.
Der Frontend-HTML-Code ist ähnlich:

<script type="text/javascript">
$(#buttonUplod).click(function () {
 $.ajaxFileUpload ({
  url:'doajaxfileupload.php', //你处理上传文件的服务端
  secureuri:false, //与页面处理代码中file相对应的ID值
  fileElementId:'img',
  dataType: 'json', //返回数据类型:text，xml，json，html,scritp,jsonp五种
  success: function (data) {
   alert(data.file_infor);
  }
 })
});
</script>
<input id="img" type="file" size="45" name="img" >
<button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button> 

Backend doajaxfileupload.php-Skript:

<&#63;php
 $upFilePath = "../attachment/";
$ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
 if($ok === FALSE){
  echo json_encode('file_infor'=>'上传失败');
 }else{
  echo json_encode('file_infor'=>'上传成功');
 }
&#63;> 

Zum Testen können Sie den übergebenen Variablenwert mit einer Methode ähnlich der folgenden speichern:

$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'Upload erfolgreich'));
exit (json_encode('file_infor'=>'Upload failed'));

※ Hinweis
Bitte beachten Sie den Tag im Feld HTML-Codedatei:

1. id='img' wird verwendet, um die fileElementId:'img' des ajaxfileupload.js-Plugins zu identifizieren 2. name='img' wird beim Senden an das Hintergrundskript im Post-Modus verwendet. PHP liest die Daten der hochgeladenen Datei über $_FILES['img']. Wenn kein solcher Wert vorhanden ist, ist die Variable $_FILES leer.

Diese beiden Werte sind also unverzichtbar und dürfen nicht verwechselt werden.

3. Unterstützen Sie zusätzliche Parameter

Manchmal müssen wir hochgeladene Dateien basierend auf bestimmten Variablen im Hintergrund verarbeiten. Aktualisieren Sie beispielsweise Dateien. Zu diesem Zeitpunkt müssen Sie einige zusätzliche Parameter an dieselbe Stufe übergeben. Also habe ich das Plugin ajaxfileupload.js geändert:

addOtherRequestsToForm: function(form,data)
{
 // add extra parameter
 var originalElement = $('<input type="hidden" name="" value="">');
 for (var key in data) {
  name = key;
  value = data[key];
  var cloneElement = originalElement.clone();
cloneElement.attr({'name':name,'value':value});
  $(cloneElement).appendTo(form);
 }
 return form;
}, 

ajaxFileUpload: function(s) {
 // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout  
 s = jQuery.extend({}, jQuery.ajaxSettings, s);
 var id = new Date().getTime()    
 var form = jQuery.createUploadForm(id, s.fileElementId);
 if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data);
 var io = jQuery.createUploadIframe(id, s.secureuri); 

Der rot markierte Teil ist der Inhalt, den ich hinzugefügt habe. Auf diese Weise kann ich zusätzliche Parameter im Frontend-HTML-Teil durch einen Code übergeben, der dem folgenden ähnelt:

url:'doajaxfileupload.php', //Ihr Server, der hochgeladene Dateien verarbeitet

secureuri:false, //ID-Wert, der der Datei im Seitenverarbeitungscode entspricht
data:{'test':'test','ok':'ok'}, //Als Objekt übertragen, können im Inhaltsteil JavaScript-Variablenwerte eingegeben werden
fileElementId:'img',

Das Hintergrundverarbeitungsskript ist:

array_push($_FILES,$_REQUEST);
$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上传成功'));
exit (json_encode('file_infor'=>'上传失败')); 

Es ist ersichtlich, dass das Prinzip sehr einfach ist: Fügen Sie dem Formular unter dem Iframe den zusätzlichen Inhalt des Datenobjekts hinzu, übergeben Sie ihn an das Hintergrund-PHP-Skript und erhalten Sie diese Werte mit Variablen wie $_REQUEST.

Der Inhalt von file_info.txt, der in der Hintergrundausgabe beibehalten wird, lautet wie folgt:

Array (

'file' =>
Array (
'name' => 'firefox-java.txt',
'type' => 'text/plain',
'tmp_name' => 'D:\Tools\xampp\tmp\phpED45.tmp',
'error' => 0,
'Größe' => 250,
),
0 =>
Array (
'test' => 'test',
'ok' => 'ok',
'PHPSESSID' => 'e379fd4fb2abca6e802a1302805a5535',
),
)

ajaxfileupload.js:

jQuery.extend({
  createUploadIframe: function(id, uri)
 {
  //create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px'; 

document.body.appendChild(io); 

return io  
  },
  createUploadForm: function(id, fileElementId)
 {
 //create form 
 var formId = 'jUploadForm' + id;
 var fileId = 'jUploadFile' + id;
 var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 
 var oldElement = $('#' + fileElementId);
 var newElement = $(oldElement).clone();
 $(oldElement).attr('id', fileId);
 $(oldElement).before(newElement);
 $(oldElement).appendTo(form);
 //set attributes
 $(form).css('position', 'absolute');
 $(form).css('top', '-1200px');
 $(form).css('left', '-1200px');
 $(form).appendTo('body'); 
 return form;
  },
 addOtherRequestsToForm: function(form,data)
 {
 // add extra parameter
 var originalElement = $('<input type="hidden" name="" value="">');
 for (var key in data) {
  name = key;
  value = data[key];
  var cloneElement = originalElement.clone();
  cloneElement.attr({'name':name,'value':value});
  $(cloneElement).appendTo(form);
 }
 return form;
 }, 

  ajaxFileUpload: function(s) {
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 
    s = jQuery.extend({}, jQuery.ajaxSettings, s);
    var id = new Date().getTime()    
 var form = jQuery.createUploadForm(id, s.fileElementId);
 if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data);
 var io = jQuery.createUploadIframe(id, s.secureuri);
 var frameId = 'jUploadFrame' + id;
 var formId = 'jUploadForm' + id; 
    // Watch for a new set of requests
    if ( s.global && ! jQuery.active++ )
 {
  jQuery.event.trigger( "ajaxStart" );
 }      
    var requestDone = false;
    // Create the request object
    var xml = {} 
    if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
    // Wait for a response to come back
    var uploadCallback = function(isTimeout)
 {  
  var io = document.getElementById(frameId);
try
  {  
  if(io.contentWindow)
  {
   xml.responseText = io.contentWindow.document.body&#63;io.contentWindow.document.body.innerHTML:null;
 xml.responseXML = io.contentWindow.document.XMLDocument&#63;io.contentWindow.document.XMLDocument:io.contentWindow.document;
  }else if(io.contentDocument)
  {
   xml.responseText = io.contentDocument.document.body&#63;io.contentDocument.document.body.innerHTML:null;
 xml.responseXML = io.contentDocument.document.XMLDocument&#63;io.contentDocument.document.XMLDocument:io.contentDocument.document;
  }   
}catch(e)
  {
  jQuery.handleError(s, xml, null, e);
  }
if ( xml || isTimeout == "timeout")
  {  
requestDone = true;
var status;
try {
status = isTimeout != "timeout" &#63; "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
   {
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );  
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
  {
status = "error";
jQuery.handleError(s, xml, status, e);
} 

// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] ); 

// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" ); 

// Process result
if ( s.complete )
s.complete(xml, status); 

jQuery(io).unbind() 

setTimeout(function()
     { try
     {
      $(io).remove();
      $(form).remove(); 
     } catch(e)
     {
      jQuery.handleError(s, xml, null, e);
     }     

     }, 100) 

xml = null 

}
    }
    // Timeout checker
    if ( s.timeout > 0 )
 {
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
    }
    try
 {
      // var io = $('#' + frameId);
  var form = $('#' + formId);
  $(form).attr('action', s.url);
  $(form).attr('method', 'POST');
  $(form).attr('target', frameId);
if(form.encoding)
  {
form.encoding = 'multipart/form-data';  
}
else
  {  
form.enctype = 'multipart/form-data';
}  
$(form).submit(); 

    } catch(e)
 {  
jQuery.handleError(s, xml, null, e);
    }
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload', uploadCallback);
    }
    else{
document.getElementById(frameId).addEventListener('load', uploadCallback, false);
    }  
    return {abort: function () {}}; 

  }, 

  uploadHttpData: function( r, type ) {
    var data = !type;
    data = type == "xml" || data &#63; r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    if ( type == "script" )
jQuery.globalEval( data );
    // Get the JavaScript object, if JSON is used.
    if ( type == "json" )
eval( "data = " + data );
    // evaluate scripts within html
    if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
  //alert($('param', data).each(function(){alert($(this).attr('value'));}));
    return data;
  }
})