第一步、页面引入必要的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接受数据进入剪切哦。