WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-8. 新訊資料修改時圖檔的上傳工作

講義參考用，要活用變化，或許要修改喔~

上傳檔案的按鈕及表單

<form enctype="multipart/form-data" method="post" action="admin_news_process.php" 
      class="w3-text-grey w3-row form-news">
 
  <div class="w3-third w3-center">
    <label class="w3-button w3-grey w3-round w3-padding cursor-p">
      <input type="file" name="news_img" id="news_img_m" style="display:none;">
      <i class="fa fa-photo"></i> 上傳圖片 </label>
    <div id="imgArea_m" title="" style="padding:20px;">
      <img class="imgArea" style="max-width:100%;height:auto;" 
           src="<?php 
                if( $row_RS_news['news_img_s']!='' ){
                  echo '../img_news/'.$row_RS_news['news_img_s'];
                }else{
                  echo '../img_layout/pre_img_news.png';
                }
                ?>">
    </div>
  </div>

設計上傳檔案的預覽影像

<script>
//準備上傳圖檔的預覽程式=====================
function preview(input) {
  //上一行的input是一個變數, 負責接收傳入的input物件
  //假如 input 接收到檔案是存在的, 並且接收到檔案不是空值
  if (input.files && input.files[0]) {
    //建立 reader 變數為一個檔案讀取器物件
    var reader = new FileReader();
    //因為讀取器的建立與整頁的讀取非同步進行, 所以得等待onload之後再.....
    reader.onload = function(e) {
      //準備顯示預覽圖的區域(也就是指定位置的img標籤)
      var resultArea = '#imgArea_m img';
      //將 e.target.result 也就是讀取器接收到的檔案名稱資訊, 
      //設定在img標籤的src屬性上, 那麼就會在指定位置顯示圖檔影像
      $(resultArea).attr('src', e.target.result);
    }
    //讀取器讀取檔案內容送到img的src
    reader.readAsDataURL(input.files[0]);
  }
}
 
//當按下 "上傳圖檔" 按鈕選擇了圖檔之後==========
$('#news_img_m').on('change', function() {
  //可以先測試選擇圖檔的input欄位接收到的val值
  //var fileName = $(this).val(); console.log(fileName);
  //將接收到圖檔的input交給preview這個function
  preview(this);
  $(this).parents('.w3-third').find('h2').remove();
});
</script>

上傳檔案=>檢查限制條件 

//當有上傳的檔案時===============================================================
if (isset($_FILES['news_img'])) {
  //引入負責檢查上傳檔案是否符合限制條件的fn函式
  include_once('../shared/fn_upload_chk.php');
 
  //設定檔案上傳的限制條件
  $file = $_FILES['news_img'];
  $max_size = 1024*1024;  //1mb
  $allow_ext = array('jpeg', 'jpg', 'png', 'gif');
  $path = '../img_news/';
  $extname  = pathinfo($file['name'], PATHINFO_EXTENSION);
  $file_name = $news_id.'.'.$extname;
 
  //將上傳檔案相關資訊交給 upload_chk 函式檢查, $msg接收上傳後的訊息, 再記錄到$_SESSION變數
  //upload_chk( 上傳的檔案, 容量上限, 允許的檔案類型, 上傳的位置, 上傳後檔案名稱 )
  $msg = upload_chk( $file, $max_size, $allow_ext, $path, $file_name );
  if( $msg!=1 ){ $_SESSION['upload_msg'] = $msg; }
}
$msg!=1?$m='&msg=0':$m='';
header('Location:./?page=admin_news'.$m);

允許上傳後=>製作縮圖=>更新資料庫儲存圖檔檔名

//當上傳的檔案存在時, 表示上傳檔案成功, 接著再製作縮圖==============================
if( file_exists($path.$file_name) ){
  //引入負責製作縮圖的fn函式
  include_once('../shared/fn_thumbnail.php');
 
  //第一次縮圖 => news_img ================================ 
  $src_name = $path.$file_name;
  $dst_name = $news_id.'_1000.'.$extname;
  $dst_w = 1000;
  $dst_h = 1000;
 
  //thumbnail( 原圖檔名, 縮圖存放路徑, 縮圖名稱, 縮圖寬度, 縮圖高度, 是否刪除來源圖檔預設不 );
  thumbnail( $src_name, $path, $dst_name, $dst_w, $dst_h, $del_source=false );
 
  if( file_exists($path.$dst_name) ){
    try {
      $sql_str = "UPDATE news SET news_img = :dst_name
                          WHERE news_id  = :news_id";
      $stmt = $conn -> prepare($sql_str);
      $stmt -> bindParam(':dst_name', $dst_name);
      $stmt -> bindParam(':news_id', $news_id);
      $stmt -> execute();
    }
    catch ( PDOException $e ){
      die("ERROR!!!: ". $e->getMessage());
    }
  }  //if 第一次縮圖存在.... End
 
  //第二次縮圖 => news_img_s ================================ 
  $dst_name = $news_id.'_200.'.$extname;
  $dst_w = 200;
  $dst_h = 200;
 
  //thumbnail( 原圖檔名, 縮圖存放路徑, 縮圖名稱, 縮圖寬度, 縮圖高度, 是否刪除來源圖檔預設不 );
  thumbnail( $src_name, $path, $dst_name, $dst_w, $dst_h, true );
 
  if( file_exists($path.$dst_name) ){
    try {
      $sql_str = "UPDATE news SET news_img_s = :dst_name
                            WHERE news_id    = :news_id";
      $stmt = $conn -> prepare($sql_str);
      $stmt -> bindParam(':dst_name', $dst_name);
      $stmt -> bindParam(':news_id', $news_id);
      $stmt -> execute();
    }
    catch ( PDOException $e ){
      die("ERROR!!!: ". $e->getMessage());
    }
  }  //if 第二次縮圖存在.... End
 
} //if 上傳檔案後=>檔案存在..... End

最後顯示訊息的方式

<?php 
if( isset($_GET['msg']) && $_GET['msg']==0 ){ 
  echo '<h2>'.$_SESSION['upload_msg'].'</h2>';
  echo '<h2>已新增的資料, 請點選「修改」再上傳圖片</h2>';
} 
?>

 

 

go TOP