Gunakan ajaxfileupload.js untuk melaksanakan ajax upload file php version_jquery

Kedua-dua PHP dan skrip sebelah pelayan lain menyediakan fungsi muat naik fail, dan ia agak mudah untuk dilaksanakan. Menggunakan JavaScript untuk bekerjasama, anda boleh melaksanakan muat naik fail Ajax. Walaupun jQuery sendiri tidak menyediakan fungsi yang dipermudahkan, terdapat banyak pemalam yang boleh mencapainya. Antaranya, ajaxfileupload.js yang disediakan oleh Phpletter.com ialah pemalam yang ringan, dan kaedah penulisannya sangat serupa dengan kaedah global $.post() yang disediakan oleh jQuery, yang mudah dan mudah digunakan.
Walau bagaimanapun, pemalam itu terlalu dipermudahkan Selain menyediakan laluan fail untuk dimuat naik, ia tidak boleh menghantar nilai tambahan kepada pelayan bahagian belakang. Jadi, saya mengubah suai skrip dan menambah parameter objek data.

1. Prinsip

Saya menggunakan PHP sebagai skrip pelayan di sini Hampir setiap buku tanpa PHP akan menyebut cara menggunakan kaedah move_uploaded_file() untuk memuat naik fail, jadi saya tidak akan menerangkan butiran di sini. Apa yang saya ingin katakan ialah, gunakan prinsip muat naik Ajax.
Kerana saya telah menggunakan perpustakaan jQuery, apabila saya memikirkan Ajax, reaksi pertama saya ialah mencuba kaedah $.post(), gunakan setiap pemilih untuk mendapatkan nilai dalam kotak fail fail, dan kemudian serahkannya ke pelayan latar belakang . Sudah tentu, ternyata kemudian bahawa ini tidak berfungsi. (Disebabkan masalah ini, saya juga menyemak banyak maklumat, dan terdapat banyak ASP dan skrip lain yang tersedia dalam talian. Saya benar-benar tidak tahu apa yang hendak dikatakan.)
Kembali ke topik, tidak sukar untuk melaksanakan muat naik Ajax, dan terdapat banyak kaedah. Pemalam ajaxfileupload.js Phpletter.com yang disebut dalam artikel ini menggunakan iframe. Ini juga merupakan kaedah biasa untuk mencapai muat naik tanpa memuat semula halaman apabila tidak menggunakan skrip JavaScript. (Blog ini menggunakan kaedah ini untuk menulis log di latar belakang bo-blog)
Pemalam ajaxfileupload.js juga sangat mudah Ia mula-mula menggunakan pemilih jQuery untuk mendapatkan nilai laluan fail dalam kotak muat naik fail, kemudian mencipta iframe secara dinamik dan mencipta kotak fail baharu di dalamnya, menyediakan kaedah pos untuk diserahkan. ke Belakang pentas. Akhirnya, keputusan dikembalikan ke kaunter penerimaan tetamu.

2. Gunakan

Menggunakan pemalam ajaxfileupload.js adalah sangat mudah.
Kod HTML bahagian hadapan adalah serupa:

<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> 

Skrip doajaxfileupload.php belakang:

<&#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;> 

Untuk ujian, anda boleh menyimpan nilai pembolehubah yang diluluskan menggunakan kaedah yang serupa dengan yang berikut:

$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'Muat naik berjaya'));
keluar (json_encode('file_infor'=>'Muat naik gagal'));

※ Nota
Sila ambil perhatian teg dalam kotak fail kod HTML:

1. id='img' digunakan untuk mengenal pasti fileElementId:'img' pemalam ajaxfileupload.js Pemilih jQuery akan menggunakan rentetan ini untuk mendapatkan nilai kotak teks 2. name='img' digunakan apabila menyerahkan kepada skrip latar belakang melalui mod pos PHP membaca data fail yang dimuat naik melalui $_FILES['img'].

Jadi, kedua-dua nilai ini amat diperlukan dan tidak boleh dikelirukan.

3. Sokong parameter tambahan

Kadangkala, kita perlu memproses fail yang dimuat naik berdasarkan pembolehubah tertentu di latar belakang. Contohnya, kemas kini fail. Pada masa ini, anda perlu menghantar beberapa parameter tambahan ke peringkat yang sama. Jadi, saya mengubah suai pemalam ajaxfileupload.js:

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); 

Bahagian bertanda merah adalah kandungan yang saya tambah. Dengan cara ini, saya boleh menghantar parameter tambahan dalam bahagian HTML bahagian hadapan melalui kod yang serupa dengan yang berikut:

url:'doajaxfileupload.php', //Pelayan anda yang mengendalikan fail yang dimuat naik

secureuri:false, //nilai ID yang sepadan dengan fail dalam kod pemprosesan halaman
data:{'test':'test','ok':'ok'}, //Dihantar sebagai objek, nilai pembolehubah JavaScript boleh dimasukkan dalam bahagian kandungan
fileElementId:'img',

Skrip pemprosesan latar belakang ialah:

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'=>'上传失败')); 

Ia boleh dilihat bahawa prinsipnya sangat mudah, iaitu, tambahkan kandungan objek data tambahan pada borang di bawah iframe, hantarkannya ke skrip PHP latar belakang, dan dapatkan nilai ini dengan pembolehubah seperti $_REQUEST.

Kandungan file_info.txt yang dikekalkan dalam output latar belakang adalah seperti berikut:

susun (

'fail' =>
tatasusunan (
'name' => 'firefox-java.txt',
'type' => 'teks/plain',
'tmp_name' => 'D:\Tools\xampp\tmp\phpED45.tmp',
'error' => 0,
'saiz' => 250,
),
0 =>
tatasusunan (
'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;
  }
})