上节课我们讲解了http://www.erdangjiade.com/js/72.html' target='_blank'>artDialog强大的弹出层插件,本文以实例讲解个人中心常用的头像裁剪。
0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值
HTML
<h2 class="title">
<a href="http://www.erdangjiade.com/js/73.html">PHP+Jcrop+artDialog头像上传</a>
</h2>
<input type="file" name="head_photo" id="head_photo" value="" />
<input type="hidden" name="photo_pic" id="photo_pic" value="" />
<!--头像显示-->
<div id="show_photo" style="border:1px solid #f7f7f7;width:66px;height:66px;">
<img id="head_photo_src" src="images/default.gif" />
</div>
引入jQuery库、Jcrop及artDialog插件:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/artDialog4.1.6/jquery.artDialog.js?skin=default"></script>
<script type="text/javascript" src="js/artDialog4.1.6/plugins/iframeTools.js"></script>
jQuery
文件上传带预览
function ajaxFileUploadview(imgid, hiddenid, url) {
$.ajaxFileUpload({
url: url,
secureuri: false,
fileElementId: imgid,
dataType: 'json',
data: {
name: 'logan',
id: 'id'
},
success: function(data, status) {
if (typeof(data.error) != 'undefined') {
if (data.error != '') {
var dialog = art.dialog({
title: false,
fixed: true,
padding: 0
});
dialog.time(2).content("<div class='tips'>" + data.error + "</div>");
} else {
var resp = data.msg;
if (resp != '0000') {
var dialog = art.dialog({
title: false,
fixed: true,
padding: 0
});
dialog.time(2).content("<div class='tips'>" + data.error + "</div>");
return false;
} else {
$('#' + hiddenid).val(data.imgurl);
art.dialog.open("crop_image.php?img=" + data.imgurl, {
title: '裁剪头像',
width: '580px',
height: '400px'
});
//dialog.time(3).content("<div class='msg-all-succeed'>上传成功!</div>");
}
}
}
},
error: function(data, status, e) {
dialog.time(3).content("<div class='tips'>" + e + "</div>");
}
})
return false;
}
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群