<form enctype="multipart/form-data" method="post" action="" class="w3-text-grey w3-row form-news"> <div class="w3-third w3-center"> <!-- 以label標籤包含input標籤, 讓input標籤隱藏, 設計label標籤呈現視覺看到的樣子 --> <!-- 當按到label標籤時, 即代表了按到了input標籤(選擇檔案準備上傳檔案) --> <label class="w3-button w3-grey w3-round w3-padding cursor-p"> <input type="file" name="news_img" id="news_img" style="display:none;"> <i class="fa fa-photo"></i> 上傳圖片 </label> <!-- #imgArea 這個區域負責顯示所選擇的圖檔, 也就是影像的預覽區域 --> <div id="imgArea" title="" style="padding:20px;"> <img class="imgArea" style="max-width:100%;height:auto;"> </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 img'; //將 e.target.result 也就是讀取器接收到的檔案名稱資訊, //設定在img標籤的src屬性上, 那麼就會在指定位置顯示圖檔影像 $(resultArea).attr('src', e.target.result); } //讀取器讀取檔案內容送到img的src reader.readAsDataURL(input.files[0]); } } //當按下 "上傳圖檔" 按鈕選擇了圖檔之後========== $('#news_img').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>'; } ?>