jquery利用ajax上传文件_jQuery利用Ajax上传文件实现在线照片剪裁例子

【www.bbyears.com--jquery】

第一步、页面引入必要的css和js（文件在本文最后,提供下载地址,供学习使用）：
 代码如下


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代码，一个上传按钮和一个预览图

<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: ""
            });
});
});
</script>

效果图如下

在这个例子中fileupload.js是最重要的一个文件哦，这们选择之后还需要php接受数据进入剪切哦。

本文来源：http://www.bbyears.com/wangyezhizuo/52882.html