2016年3月8日 星期二

[javascript]上傳圖片預覽

html部分:

<div>
<img class="img_preview" style="max-width: 150px; max-height: 150px;" src="xxx.png">
<div class="img_size"></div>
<input type="file" name="img_upload" id="img_upload">
</div>

javascript部分:

jQuery(document).ready(function() {
 
  function img_preview(input){
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        jQuery('.img_preview').attr('src', e.target.result);
        var kb = format_float(e.total / 1024, 2);
        jQuery('.img_size').text("檔案大小:" + kb + " KB");
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  jQuery("body").on("change", "#img_upload", function (){
   img_preview(this);
  });
});

2016年2月24日 星期三

[jQuery]計算文字框輸入的字數

HTML部分:
<div>
<textarea id="desc" name="desc"></textarea>
<div class="change">您還剩下「<span id="word"></span>」字,即可進行下一步</div>
<div class="next">滿200個字囉!您可以繼續填寫或進行下一步</div>
</div>

javacript部分:
jQuery(document).ready(function() {
jQuery('#word').text('200');
jQuery('.next').hide();
jQuery('#desc').on("keyup", KeyIn).on("keydown", KeyIn).on("change", KeyIn);
});

function KeyIn(evt) {
var maxLength = 200;

var nowContent = jQuery(this).val();
var nowLehgth = nowContent.length;

if (nowLehgth > maxLength){
jQuery('.change').hide("slow");
jQuery('.next').show("slow");
}
else{
jQuery('.next').hide("slow");
jQuery('.change').show("slow");
jQuery("#word").html(maxLength - nowLehgth);
}
}

2016年2月2日 星期二

[xampp]安裝laravel

1.開啟命令提示字元(cmd)
2.選擇到xampp目錄下的php資料夾下載composer
    > cd C:\xampp\php

    > php -r "readfile('https://getcomposer.org/installer');" | php

3.下載完成後 composer 將被下載在 C:\xampp\php\composer.phar ,通常會習慣將其重新命名為 composer
    > rename composer.phar composer
4.測試是否安裝成功
輸入php composer
有出現 composer 版本及指令說明代表安裝成功

5.安裝 Laravel
將 PHP 的目錄加到環境變數 $PATH 裡面
> php composer global require "laravel/installer=~1.1"
6.建立新的 Laravel 專案
> php composer create-project laravel/laravel  C:\www\www_laravel --prefer-dist

7.設定 Apache 建立 VirtualHost
 在 C:\Windows\System32\drivers\etc\hosts 加上
 127.0.0.1       laravel

8.在 Apache 增加 VirtualHost
在 C:\xampp\apache\conf\extra\httpd-vhosts.conf 最後加上

   <VirtualHost *>
        DocumentRoot "C:\www\www_laravel\public"
        ServerName laravel
      <Directory "C:\www\www_laravel\public">
            AllowOverride All
            Require all granted
      </Directory>
    </VirtualHost>

9.重開 Apache 服務
10.開啟瀏覽器輸入http://laravel/


2016年1月4日 星期一

[xampp]本地端更新wordpress 外掛時出現輸入ftp的解決方式

在wp-config.php
輸入以下:
define("FS_METHOD", "direct");define("FS_CHMOD_DIR", 0777);define("FS_CHMOD_FILE", 0777);

2015年12月11日 星期五

[wordpress]利用程式自動新增文章並預設特色圖片

本段程式是自己改寫於新增portfolio文章與新增post文章有點不同

function auto_post(){
$postData = array(
'post_title'    => 'My portfolio post',
'post_content'  => '',
'post_type'      => 'dt_portfolio', // Default 'post',預設值是post
'post_status'   => 'publish',
'post_author'   => 1
);
  // 新增文章並取得post_id
$post_id = wp_insert_post( $postData );
             
  $getImageFile =  ABSPATH . 'wp-content/uploads/2015/11/4A7C3296.jpg';// 圖片來源
$wp_filetype = wp_check_filetype( $getImageFile, null );

$attachment_data = array(
'post_mime_type' => $wp_filetype['type'],
'post_title' => sanitize_file_name( $getImageFile ),
'post_content' => '',
'post_status' => 'inherit'
);
$attach_id = wp_insert_attachment( $attachment_data, $getImageFile, $post_id );
  require_once( ABSPATH . 'wp-admin/includes/image.php' );
  $attach_data = wp_generate_attachment_metadata( $attach_id, $getImageFile );
  wp_update_attachment_metadata( $attach_id, $attach_data );
  // 設定特色圖片縮圖
  set_post_thumbnail( $post_id, $attach_id );
   // 設定portfolio分類(註)
wp_set_post_terms($post_id, 22, 'dt_portfolio_category');
}



註:假如是文章的話不需在此設定分類,$postData那邊加入以下程式'post_category' => array( $Category ),即可,因為筆者要新增的是portfolio分類所以無法使用該方法,故用wp_set_post_terms()來修改該筆post分類。

2015年12月8日 星期二

2015年12月1日 星期二

[wordpress]woocommerce後台購買日期變成"年/月/日"解決方法

woocommerce後台購買日期變成"年/月/日"是因為語系語翻譯錯誤所造成,可以用poedit去編輯語系檔案,找到"年/月/日"把它改成"y/m/d"再儲存就可以。
檔案路徑:\htdocs\wp-content\languages\plugins\woocommerce-admin-zh_TW.po
註:這是woocommerce官方釋出的翻譯檔就已經出錯,所以此方法在官方未更新翻譯檔的情況下只能治標不能治本。翻譯覆蓋後請記得再去修改。

[Laravel]環境架設,使用docker + laradock

1.選擇使用docker + laradock在windows10的環境使用 先至 docker官方網站 下載 docker for windows   2.依照執行程式下載安裝 這邊我的電腦有遇到一些問題順便記錄下來, 在下載啟動docker時發生錯誤   Hardw...