自學php【一】任務：圖片上傳即時可見

時間 2019-11-12

標籤自學 php 任務圖片上傳即時可見欄目 PHP 简体版

原文原文鏈接

工做已經快2周了，頭兒給派了個任務作個企業站！這幾天正在緊鑼密鼓的做戰中！等忙完了這個活！寫下本身的學習心得體會！與看到文章的您一塊兒分享！php

在這裏記錄每次遇到的難題，如何解決的！html

今天要作的功能就是實現上傳圖片即時可見！數組

效果以下：瀏覽器

下面說下大概思路，界面的話，會點兒CSS+DIV HTML 百度一下均可以解決掉！我這裏寫的有點兒稍微代碼冗餘了！由於就幾張圖片，懶的用for了！ide

　　　　　　　　 js方面：添加圖片以後，取得change的value，寫到text中去！這個各個瀏覽器可能不同，無所謂了！函數

　　　　　　　　php方面：點擊上傳，圖片上傳到php處理，我是直接寫入到xml ，當載入界面以前，先讀取xml文檔中的值分配到html，然後再載入界面，這樣就能夠了！post

我用CI有的時候直接就顯示了，若是不顯示應該用js 即時reload一下界面就能夠了！學習

貼上代碼：供參考，以及提出批評意見！this

HTML代碼，這裏我就不所有粘貼了，只粘貼了其中3個div 其實這些能夠用php的for完成的！ spa

 1 <div id="slider_manage">
 2 <div class="slider_manage">
 3     <h4>幻燈片管理-1</h4>
 4     <form method="post" enctype="multipart/form-data">
 5      <img src="<?php if( isset($slider_2) && $slider_1 == 'img_1.jpg' ){ echo __IMG_READ_URL__ . '/slider/' . $slider_1 ;} else { echo __IMG_READ_URL__ . '/temp.jpg';}?>" class="slider_1" width="260" height="150">
 6      <input type="text" id="textField_1" class="textField" name="textField" class="txt"/>
 7         <input type="hidden" name="img_num" value="img_1">
 8      <input type="button" class="btn" value="添加...">
 9      <input type="file" name="fileField" class="file" id="fileField_1" size="28" onchange="document.getElementById('textField_1').value = this.value">
10     <input type="submit" class="btn btn-Submit" value="上傳">
11     </form>
12 </div>
13 <div class="slider_manage">
14     <h4>幻燈片管理-2</h4>
15     <form method="post" enctype="multipart/form-data">
16         <img src="<?php if( isset($slider_2) && $slider_2 == 'img_2.jpg' ){ echo __IMG_READ_URL__ . '/slider/' . $slider_2 ;} else { echo __IMG_READ_URL__ . '/temp.jpg';}?>" class="slider slider_2" width="260" height="150">
17         <input type="text" id="textField_2" class="textField" name="textField" class="txt"/>
18         <input type="hidden" name="img_num" value="img_2">
19         <input type="button" class="btn" value="添加...">
20         <input type="file" name="fileField" class="file" id="fileField_2" size="28" onchange="document.getElementById('textField_2').value = this.value">
21         <input type="submit" class="btn btn-Submit" value="上傳">
22     </form>
23 </div>
24 <div class="slider_manage">
25     <h4>幻燈片管理-3</h4>
26     <form method="post" enctype="multipart/form-data">
27         <img src="<?php if( isset($slider_3)&& $slider_3 == 'img_3.jpg' ){ echo __IMG_READ_URL__ . '/slider/' . $slider_3 ;} else { echo __IMG_READ_URL__ . '/temp.jpg';}?>" class="slider slider_3" width="260" height="150">
28         <input type="text" id="textField_3" class="textField" name="textField" class="txt"/>
29         <input type="hidden" name="img_num" value="img_3">
30         <input type="button" class="btn" value="添加...">
31         <input type="file" name="fileField" class="file" id="fileField_2" size="28" onchange="document.getElementById('textField_3').value = this.value">
32         <input type="submit" class="btn btn-Submit" value="上傳">
33     </form>
34 </div>
35 </div>

js代碼以下，主要也在js中控制了上傳類型，若是判斷不到所須要的類型就直接alert一個警告！而且清楚掉text中的value 以此證實不能上傳！其實在input file中應該仍是有值的！當時用戶看不到覺得就清楚了，就會從新上傳！

 1 $(document).ready(function() {
 2     //當文件上傳時處理動做，
 3     $('.file').change(function() {
 4         var file = this.value;                                               //取得當前改變的值
 5         var current_text = $(this).parent().find("input[type='text']");      //取得當前form裏面的text值
 6 
 7         var fileType = file.substring(file.indexOf('.')+1, file.length);     //截取文件的類型
 8 
 9         switch (fileType.toLowerCase()) {
10             case 'jpg':
11                 break;
12             case 'png':
13                 break;
14             case 'gif':
15                 break;
16             default :
17              alert('請上傳圖片格式');                //若是圖片不是jpg png gif 就彈出警告，而且清空text
18             $(current_text).val('');
19                 break;
20         }
21 
22     });
23 });

下面貼上php代碼，code中的常量是配置的upload的路徑！

write_xml（） 這個函數，能夠利用更爲簡便的方式！
否則這裏要寫好多case語句！很是冗餘，由於時間有限，而且我把前面都寫好了！SO。。。 。。。
下次有時間再修改如下！若是您有好的想法，能夠回覆給我！很是感謝！

   /**
  2      * 首頁管理頁面載入
  3      */
  4     public function index() {
  5         //從xml文件獲取首頁的三張幻燈片和2張廣告圖
  6         $img_arr = $this->get_img_by_xml();
  7        //接收到上傳過來的圖片文件
  8         if( !empty( $_FILES ) && is_array($_FILES)) {
  9 
 10             //img_num  是記錄上傳的哪張圖片的，分別是img_1,2,3 表明幻燈片， img_4,5，表明橫幅廣告
 11           $this->upload_move_process($_FILES, $this->input->post('img_num'));
 12 
 13         }
 14 
 15         //接收修改公告信息
 16         $notice = $this->input->post('notice');
 17 
 18         if( strtolower($_SERVER['REQUEST_METHOD']) == 'post') {
 19             if($notice == '') {
 20                 $img_arr['notice_error'] = '沒有任何公告能夠提交';
 21             } else {
 22                 $this->update_notice($notice);
 23                 $this->alert();
 24             }//endif
 25         }
 26         $this->load->view('index_manage', $img_arr);
 27     }
 28 
 43     /**處理上傳過來的圖片文件，移動到指定upload位置，而且寫入到xml配置文件
 44      * @param $uploadFile  $_FILES
 45      */
 46     private function upload_move_process($uploadFile, $img_num) {
 47         $tmp_name = $uploadFile['fileField']['tmp_name'];
 48         $file_name = strstr( $uploadFile['fileField']['name'], '.' );//獲取文件後綴
 49         if(is_uploaded_file( $tmp_name ) ) {
 50             if($uploadFile['fileField']['error'] == 0) {//文件上傳
 51                 if(is_dir(__UPLOAD_FILE__  . '/slider')) {
 52                     move_uploaded_file($tmp_name, __UPLOAD_FILE__ . '/slider/' . $img_num . '.jpg');
 53                 } else {
 54                     mkdir(__UPLOAD_FILE__  . '/slider');
 55                     move_uploaded_file($tmp_name, __UPLOAD_FILE__ . '/slider/' . $img_num . '.jpg');
 56                 }
 57                 //寫入到xml配置文件
 58                $this->write_xml($img_num);
 59             }//endif
 60         }//endif
 61         return TRUE;
 62     }
 63 
 64     /**將img寫入到xml文件中
 65      * @param $img_num  原型是img_1  img_2  img3  就是當前修改的圖片
 66      */
 67     private function write_xml($img_num) {
 68         //這裏應該加判斷xml文件是否存在，不存在就新建一個！出於給客戶就已經帶着xml文件，這裏就再也不建立！
 69         $xml = simplexml_load_file(__IMG_CONFIG__);
 70         $slider = $xml->slider;  $indexad = $xml->indexad;
 71         switch($img_num) {
 72             case 'img_1':
 73                 $slider->slider_1 =  $img_num . '.jpg';
 74                 break;
 75             case 'img_2':
 76                 $slider->slider_2 = $img_num . '.jpg';
 77                 break;
 78             case 'img_3':
 79                 $slider->slider_3 = $img_num . '.jpg';
 80                 break;
 81             case 'img_4':
 82                 $indexad->left = $img_num . '.jpg';
 83                 break;
 84             case 'img_5':
 85                 $indexad->right = $img_num . '.jpg';
 86         }
 87         file_put_contents(__IMG_CONFIG__, $xml->asXML());
 88     }
 89 
 90     /**獲取首頁幻燈片以及廣告圖
 91      * @return mixed 數組對象
 92      */
 93     private function get_img_by_xml() {
 94         $xml = simplexml_load_file(__IMG_CONFIG__);
 95         $slider = $xml->slider;
 96         $indexad = $xml->indexad;
 97         $img['slider_1'] =(string)$slider->slider_1;
 98         $img['slider_2'] =(string) $slider->slider_2;
 99         $img['slider_3'] =(string) $slider->slider_3;
100         $img['ad_left']  =(string)$indexad->left;
101         $img['ad_right'] =(string)$indexad->right;
102         return $img;
103     }

貼上XML代碼，每次上傳都會寫入同一個地方，直接覆蓋掉原來的值，可是圖片已經換掉了！

 1 <root>
 2     <slider>
 3         <slider_1>img_1.jpg</slider_1>
 4         <slider_2>img_2.jpg</slider_2>
 5         <slider_3>img_3.jpg</slider_3>
 6     </slider>
 7     <indexad>
 8         <left>img_4.jpg</left>
 9         <right>img_5.jpg</right>
10     </indexad>
11 </root>