在此過程中，筆者遇到了一些往常沒有遇到過的問題，通過Google和查詢API找到了解決問題的方法，在此整理出來與遇到同樣問題的朋友們分享。

    首先，筆者在用input:file上傳圖片的時候，更改了控制元件了樣式，用input:text和input:button這兩個控制元件來代替input:file，原來的input:file控制元件隱藏，如此，只需要更改後兩個控制元件的樣式，並且新增他們與input:file的關聯即可。具體程式碼如下：

HTML:

<span style="font-family:Times New Roman;font-size:14px;"><input type=file id="xxx" name=orifile style="xxx;display:none;" onChange="$('input[name=\'filetext\']').val($(this).val());"/>
<input type=text name=filetext class="sss" style="xxx"/> 
<input type=button value="submit" onclick="$('input[name=\'orifile\']').click();" class="xxx" style="xxx"/></span>
 

    筆者在系統中，需要繫結input:file控制元件的onChange事件，而且能夠在該控制元件能夠連續不斷的觸發onChange事件。在jquery1.7之前的版本中，可以通過jQuery.live()事件進行繫結，但是在jquery1.7之後的版本，live方法已經被棄用了，轉而取代它的是on方法，可以筆者在通過on方法繫結onChange事件時，只能夠觸發一次。

    在查閱過大量資料以後，筆者對程式碼進行了改進，改進的過程如下：

JAVASCRIPT:

<span style="font-family:Times New Roman;font-size:14px;">$(document).on("change", "#xxx", function(){
    函式體...
});</span>
 

    筆者使用Jcrop這款JQuery外掛來處理影象剪裁的，這款外掛相對比較簡單易學，有三種方法可以對外掛進行載入，筆者建議使用Jcrop的api，具體程式碼如下：

JAVASCRIPT:

<span style="font-family:Times New Roman;font-size:14px;">/*選框大小固定為1000*160，不允許更改選框大小*/
var api;
var opt = {};
opt.allowResize = false;  //不允許更改選框大小
opt.allowSelect = false;  //不允許建立新選框
opt.allowMove = true;  //允許拖動選框
opt.boxWidth = 1100;  //畫布寬度
opt.boxHeight = 500;  //畫布高度
opt.aspectRatio = 6.25;  //圖片的橫縱比
api = $.Jcrop("#jcrop", opt);  //建立外掛
api.setImage(/*圖片路徑*/path);  //載入圖片
api.setOptions({onSelect: getCoords});  //新增選項，onSelect是建立選框之後觸發的事件

api.animateTo([0, 0, 1000, 160]);  //選框生成動畫
api.setSelect([0, 0, 1000, 160]);  //生成選框

/*事件觸發函式*/
function getCoords(obj) {
    /*以下引數需要通過ajax傳送至php後臺*/
      selectw = parseInt(obj.w);  //選框寬度
      selecth = parseInt(obj.h);   //選框高度
      selectx = parseInt(obj.x);   //選框起點x座標
      selecty = parseInt(obj.y);   //選框起點y座標
}</span><span style="font-size:18px;font-family: KaiTi_GB2312;">
</span>
 

<span style="font-family:Times New Roman;font-size:14px;">$type = exif_imagetype($path);  //獲得圖片型別
switch ($type) {
      case IMAGETYPE_GIF:
           $im1 = imagecreatefromgif($path);  //建立一個跟原圖一樣大小的圖片
           break;
      case IMAGETYPE_JPEG:
           $im1 = imagecreatefromjpeg($path);  //建立一個跟原圖一樣大小的圖片
           break;
      case IMAGETYPE_PNG:
           $im1 = imagecreatefrompng($path);  //建立一個跟原圖一樣大小的圖片
           break;
      default :
           exit();
	  break;
}

$new_img = imagecreatetruecolor($w, $h);  //建立一個使用者剪裁寬高的黑白圖片
imagecopyresampled($new_img, $im1, 0, 0, $x, $y, $w, $h, $w, $h); //將原圖拷貝到新建立剪裁區域的圖片中

switch ($type) {
       case IMAGETYPE_GIF:
            imagegif($new_img, $newsrc); //按新路徑儲存圖片
            break;
       case IMAGETYPE_JPEG:
            imagejpeg($new_img, $newsrc, 100);  //按新路徑儲存圖片
            break;
       case IMAGETYPE_PNG:
            imagepng($new_img, $newsrc, 9);  //按新路徑儲存圖片
            break;
       default:
            exit();
            break;
}</span>

    這樣圖片就剪裁完成了。

    剪裁前的效果：

    剪裁後的效果：