Joomla!扩展制作实例教程-模板展示组件-增加后台上传图片功能 【转】

 

我们再来看看数据表的结构，有一个字段imgfilename ，这个一个图片的路径，我们当然可以将这个图片上传到服务器相关位置，然后在这个地方输入我们的路径，但是这样显然不是很方便，现在我们来进行一些修改，从而能够上传图片到服务器，并自动给出图片的路径。

第一步，当然还是要在后台的model目录中，showcase.xml中，去掉关于imgfilename这一行。

第二步，修改administrator/components/com_showcase/views/showcase/tmpl/form.php文件：在我们上次添加所见所得功能的table中增加一个<tr>，代码如下：

<tr> <td width="40%" class="paramlist_key"> <span class="editlinktip"> <label id="detailsimgfilename-lbl" for="detailsimgfilename" class="hasTip" title="imgfilename::imgfilename">imgfilename</label> </span> </td> <td class="paramlist_value"> <input type="text" name="details[imgfilename]" id="detailsimgfilename" value="<?php echo $this->item->imgfilename;?>" class="text_area" size="50" /> <div class="button2-left"><div class="image"><a class="modal-button" title="logo upload" href="/index.php/component/showcase/images.html?tmpl=component&e_name=text" mce_href="/index.php/component/showcase/images.html?tmpl=component&e_name=text" rel="{handler: 'iframe', size: {x: 570, y: 100}}">logo upload</a></div></div> </td> </tr> 

 

现在我们来看看，添加记录的 页面：

 

 

点击logo upload ，可以弹出一个窗口，不过现在窗口的文件，我们还没有完成，接下来我们来完成，文件上传部分。

第三步，在views目录下创建一个目录images ,以及images/tmpl目录，在images目录下创建一个新文件view.html.php，代码如下：

<?php defined('_JEXEC') or die(); jimport( 'joomla.application.component.view' ); class ShowcasesViewImages extends JView { function display($tpl = null) { $session = & JFactory::getSession(); $this->assignRef('session',$session); parent::display($tpl); } } 

 

在tmpl目录下，创建一个default.php文件，代码如下：

<form action="<?php echo JURI::base(); ?>index.php?option=com_showcase&task=upload&<?php echo $this->session->getName().'='.$this->session->getId(); ?>&pop_up=1&<?php echo JUtility::getToken(); ?>=1" id="uploadForm" method="post" enctype="multipart/form-data"> <fieldset> <legend><?php echo JText::_('Upload'); ?></legend> <fieldset class="actions"> <input type="file" id="file-upload" name="Filedata" /> <input type="submit" id="file-upload-submit" value="<?php echo JText::_('Start Upload'); ?>"/> <span id="upload-clear"></span> </fieldset> <ul class="upload-queue" id="upload-queue"> <li style="display: none" mce_style="display: none" /> </ul> </fieldset> <input type="hidden" name="return-url" value="" /> </form> 

 

这里我们没有采用fancyupload ，以后我们会修改这部分，改为fancyupload上。

现在，再点击logo upload 按钮，就会出现，选择图片并上传的界面：

 

 

 

第四步，修改controller.php文件，接收并保存上传后的图片文件，我们增加一个函数upload ，代码如下：

  function upload(){ global $mainframe; $root='/images/templates'; JRequest::checkToken( 'request' ) or die( 'Invalid Token' ); $file = JRequest::getVar( 'Filedata', '', 'files', 'array' ); $folder = JRequest::getVar( 'folder', '', '', 'path' ); $format = JRequest::getVar( 'format', 'html', '', 'cmd'); $return = JRequest::getVar( 'return-url', null, 'post', 'base64' ); $err = null; // Make the filename safe jimport('joomla.filesystem.file'); $file['name'] = JFile::makeSafe('showcase-'.$file['name']); if (isset($file['name'])) { $filepath = $_SERVER['DOCUMENT_ROOT'].$root.DS.strtolower($file['name']); $filesavepath = $root.DS.strtolower($file['name']); if (!JFile::upload($file['tmp_name'], $filepath)) { if ($format == 'json') { jimport('joomla.error.log'); $log = &JLog::getInstance('upload.error.php'); $log->addEntry(array('comment' => 'Cannot upload: '.$filepath)); header('HTTP/1.0 400 Bad Request'); die('Error. Unable to upload file'); } else { JError::raiseWarning(100, JText::_('Error. Unable to upload file')); if ($return) { $mainframe->redirect(base64_decode($return).'&folder='.$folder); } return; } } else { if ($format == 'json') { jimport('joomla.error.log'); $log = &JLog::getInstance(); $log->addEntry(array('comment' => $folder)); $mainframe->redirect('index.php?option=com_showcase&view=images&layout=finish&tmpl=component&e_name=details[imgfilename]&upfile='.$filesavepath); } else { $mainframe->redirect('index.php?option=com_showcase&view=images&layout=finish&tmpl=component&e_name=details[imgfilename]&upfile='.$filesavepath); return; } } } else { $mainframe->redirect('index.php', 'Invalid Request', 'error'); } } 

 

这部分代码不解释了，就是保存上传图片文件，要保证 $roort变量中指定的目录有写入权限，这里看起来很复杂，还有部分是为了将该改为fancyupload后，而保留的代码。

其实现在就可以上传图片，只是上传后的转向文件还没完成。

第五步，增加上传完毕后的处理页面，在tmpl目录中增加一个finish.php文件，其中，代码如下：

<form method="post" enctype="multipart/form-data"> <fieldset> <legend>Upload Complete</legend> <input type='text' style='width:400px' value='<?php echo JRequest::getVar('upfile'); ?>'> <input type='button' value='ok' οnclick="onok();window.parent.document.getElementById('sbox-window').close();"> <input type='button' value='cancel' οnclick="window.parent.document.getElementById('sbox-window').close();"> </fieldset> </form> <mce:script ><!-- function onok(){ window.parent.document.getElementById('detailsimgfilename').value='<?php echo JRequest::getVar('upfile');?>'; } // --></mce:script> 

 

上传完毕后，文件的保存地址，出现在弹出窗口中，确定后，这个路径保存在 imgfilename的输入框中。

现在我们就完成了后台图片的上传工作，不过我们也留下了两个工作，一是没有采用fancyupload ，二是我们保存图片的地址写在程序中，而没有通过后台参数设置，在实际工作中，这可能是需要的。这两项工作我们留作以后进行。