jQuery利用Ajax上傳檔案實現線上照片剪裁例子

第一步、頁面引入必要的css和js（檔案在本文最後,提供下載地址,供學習使用）：

代碼如下

複製代碼

<link rel="stylesheet" type="text/css" href="css/open_platform.css" /> <link rel="stylesheet" type="text/css" href="css/open_qq_agreement.css" /> <link rel="stylesheet" type="text/css" href="css/confirm_by_dialog.css" /> <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.9.0.custom.min.css" /> <script type="text/javascript"  src="js/jquery.js"></script> <script type="text/javascript"  src="js/jquery-ui-1.9.0.custom.min.js"></script> <script type="text/javascript"  src="js/qzfl_for_qzone.js"></script> <script type="text/javascript"  src="js/open_v2.js"></script> <script type="text/javascript"  src="js/fileupload.js"></script>

第二步、寫html代碼，一個上傳按鈕和一個預覽圖

<div class="div_btn img_upload_panel">
<input type="hidden" name="face_path" value="" />
<p class="pic" >
<img src="image/default_100.jpg" id="icon_img" />
</p>
<div class="clear"></div>
<br />
<p><input type="button" value="上傳圖片" class="file_icon_upload_btn"/></p>
<br />
</div>
第三步、給上傳按鈕綁定上傳事件

<script type="text/javascript" >
$(document).ready(function(){
//表徵圖上傳
$(".file_icon_upload_btn").click(function(){
    var post_url ="uploadify.json?type=icon",
    desc="選擇一個255x255，大小1MB以內，png/jpg 格式的圖片",
    pf_id=1,_flag="255_255",_size=1024*1024;
    var _this=$(this);
  OP_COMMON.upload.showUpload(post_url,
            function(ret) {
  //上傳回呼函數//
  $("#icon_img").attr("src",ret.filePath);
            $(_this).val("更改");
            },
            desc, _size, false,_flag, {
                customContent: '<input type="hidden" name="pf" value="' + pf_id + '" />'
            });
});
});
</script>

效果圖如下

 

 

在這個例子中fileupload.js是最重要的一個檔案哦，這們選擇之後還需要php接受資料進入剪下哦。