Insight into eDir-CMS (Composed by Wing and EA) - 1

来源：互联网发布：矩阵理论与应用答案编辑：程序博客网时间：2024/06/06 10:53

The first topic is about the output buffer of PHP, since I found intensive usage ofob_start() andob_end_flush() functions.

Refs:

http://rickykwan.iworkshop.com.hk/2010/03/656.html

http://php.net/manual/en/function.ob-start.php

I will break up the whole site piece by piece, and before that, inspect the overall structure:

Media File Upload

img-upload

This page might be the most complex one, since it has form, tabs and model dialog which is implemented by jQuery UI. The main structure of this page is shown as:

code-str

And we will ignore the tabs for now, we take a close look at the table inside the div of images:

div-img-table

Basically, the upload button will cause the dialog pops up, and that function is powered by jQuery UI, for now, we only focus on the form inside the floating dialog, which enable user to upload image files, and to investigate how it works with server side. For simplicity, we copy the code generated by PHP from server for that form into a test HTML file: upload-image-dialog_nonstyle.html, and we prune away the ajax code for model dialog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script></head><body><form action="upload.php" method="POST" enctype="multipart/form-data"><fieldset><table style="border:0;"><input type="hidden" id="ul-upimage-name" name="upimage-name" value="" /><tr><td valign="top">Preview:</td><td colspan="2"><img src="" id="previewImg" alt="No Upload" style="min-width:50px; max-width:200px; max-height:200px;" /></td></tr><tr><td valign="middle"><label>Name</label></td><td valign="middle" colspan="2"><input type="text" value="" id="mfile_title" name="mfile_title" /></td></tr><tr><td valign="middle"><label>Upload</label></td><td valign="middle"><input type="file" accept="image/jpeg,image/png" name="ulfile" id="file-ul-upimage" style="display:inline; float:left; min-width:0;" /></td><td valign="middle"><button type="submit" onclick="return(FileUpload_upimage());">Upload</button></td></tr></table></fieldset></form><script type="text/javascript" src="ajaxfileupload.js"></script><script type="text/javascript">   function FileUpload_upimage()  {$("#loading").ajaxStart(function() {$(this).show();}).ajaxComplete(function() {$(this).hide();});$.ajaxFileUpload({url:'upload.php',secureuri:false,fileElementId:'file-ul-upimage',dataType: 'json',data:{ name:'images-upimage', type:'image' },success: function(data, status){if(typeof(data.error) != 'undefined'){if(data.error != ''){alert(data.error);}else{$('#previewImg').attr('src',data.path);$('#ul-upimage-name').val(data.name);}}},error: function(data, status, e){alert(e);}});return false;}</script></body></html>

Now let's bring it up into browser:

simplified-upload-form

And play it in action:

with-response-form-ajaxfileupload

Here is the HTML code comparison between pre and pro receiving the response from the server:

compare-pre-pro

And what happened during that period? Inspect the report in Firebug:

requests-fbug

And now it is time to talk about the ajax code that does the magic. When the 'upload' button is clicked, this javascript function will be invoked:

function FileUpload_upimage(){$("#loading").ajaxStart(function() {$(this).show();}).ajaxComplete(function() {$(this).hide();});$.ajaxFileUpload({url:'upload.php',secureuri:false,fileElementId:'file-ul-upimage',dataType: 'json',data:{ name:'images-upimage', type:'image' },success: function(data, status){if(typeof(data.error) != 'undefined'){if(data.error != ''){alert(data.error);}else{$('#previewImg').attr('src',data.path);$('#ul-upimage-name').val(data.name);}}},error: function(data, status, e){alert(e);}});return false;}

We omit the loading element now, and go back to it later.The main part inside this function is the call toajaxFileUpload() function, and that is a jQuery Plugin, its page:

http://www.phpletter.com/Our-Projects/AjaxFileUpload/

So, the main point here is that: when the server responds a JSON back, then ajax will set the img tag with id previewImg its src to the path property in JSON, and set theul-upimage-name input's value to the name property:

$('#previewImg').attr('src',data.path);  $('#ul-upimage-name').val(data.name);

According to Firebug, the responded JSON is:

{error: '',msg: ' File Name: 131A95350D0-32X36.jpg,  File Size: 101623',path: 'upload/131A95350D0-32X36.jpg',name: '131A95350D0-32X36.jpg'}

And now, what does upload.php do?

server-snippet

server-snippet-2

We have talked about upload-file-function coding on server side with PHP in the previous blog. The$_FILES['inputName'] is an array of all the info you need. And please notethe difference between the PHP global temporary folder and the temporary folder specified for this very site, they are two different concepts utterly!!

upload-folder

And there is one problem here is that the uploaded file will be stored on the server with the same as its original name before uploading. So the later uploaded file with the same name will overwrite the previous one, and that may become a problem in the future!!!

Model Dialog

The output HTML from PHP for that is just a simple DIV tag, with our own form inside:

div-for-m-dialog

<div id="dialog-upimage-ul" title="Image Upload upload" class="ui-dialog"><!-- your code--></div>

But when inspecting it in Firebug, this tag becomes:

gen-dialog-code

The code is transparent because it is invisible at the moment and its position in DOM has also been changed, it is the last direct child of BODY.

The job should be handled by the call to dialog() function on the DIVdialog-upimage-ul.

Now take a look at the custom ajax code for controlling dialog:

$(function() {$("#dialog:ui-dialog").dialog("destroy");$("#dialog-upimage-ul").dialog( {autoOpen:false,height:440,width:550,modal:true,resizable:false,buttons: {"Confirm" : function() {$.post("StoreMedia.php",{"file":$("#ul-upimage-name").val(),"type":"image",'mfile_title':$('#mfile_title').val()},function(data) {//alert(data);location = location;});},"Cancel" : function() {$( "#dialog-upimage-ul" ).dialog( "close" );}},close: function() {}});$("#img-images-upimage-ul").click(function() {$( "#dialog-upimage-ul" ).dialog( "open" );return(false);});});

This block is just one call to $(), and it is to tell browser what to do after the DOM be created, indeed, the first statement:

$("#dialog:ui-dialog").dialog("destroy");

makes no sense, since there is no element with ID dialog at any time. We can remove it for a while.

The official site about jQuery UI dialog is: http://jqueryui.com/demos/dialog/

The main stuff here is the call-back function of confirm button:

"Confirm" : function() {$.post("StoreMedia.php",{"file":$("#ul-upimage-name").val(),"type":"image",'mfile_title':$('#mfile_title').val()},function(data) {//alert(data);location = location;});},

It calls $.post() function and pass three params:

1. URL

2. a literal object with three properties

3. a call-back function

And actually it is a shorthand Ajax() function, just with the type option set as POST. What it does is when user pressing 'Confirm' sending image file name, title and its type(image) to storemedia.php. When the XHR receive the response, it set location to location, what the hell is that???

According to this article:

javascript 的 location 各種用法

The effect of "location = location;" is reloading the current page, but plz note this won't work when URL has a '#' appending it.