62,046
社区成员
发帖
与我相关
我的任务
分享
$("#userImg").change(function () {
if (FileReader) {
var reader = new FileReader(), file = this.files[0];
reader.onload = function (e) {
$("#userImage").attr("src", e.target.result);
$("#smallImg").attr("src", e.target.result);
};
reader.readAsDataURL(file);
$("#imgUrl").val();
}
var jcrop_api, boundx, boundy;
$("#userImage").Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
maxSize: [300, 300],
minSize: [50, 50],
setSelect: [0, 0, 100, 100]
}, function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = 120 / c.w;
var ry = 120 / c.h;
$("#smallImg").css({
width: Math.round(rx * boundx) + "px",
height: Math.round(ry * boundy) + "px",
marginLeft: "-" + Math.round(rx * c.x) + "px",
marginTop: "-" + Math.round(ry * c.y) + "px"
});
}
$("#point").val(c.x + "," + c.y + "," + c.x2 + "," + c.y2 + "," + c.w + "," + c.h);
}
});
<div id="tab_3-4" class="tab-pane">
<form id="UserInfoForm" class="form-horizontal form-bordered form-row-stripped" method="post">
<div class="form-body">
<div class="alert alert-success display-hide">
<button class="close" data-close="alert"></button>
<span id="danger"></span>
</div>
<div class="alert alert-success display-hide">
<button class="close" data-close="alert"></button>
<span id="success"></span>
</div>
<div>
<div style="display: none;"></div>
</div>
<div class="form-group">
<label class="control-label col-md-3">头像</label>
<div class="col-md-4">
<div class="input-group">
@*<span class="input-group-addon"><i class="fa fa-lock"></i></span>*@
<input type="file" id="userImg" name="userImg" value="" />
</div>
<div class="col-md-4">
<span>原始图片</span>
<img id="userImage" style="max-width: 300px; max-height:300px; height: 300px; width: 300px;" alt="" />
<div style="width: 100px; height: 100px; overflow: hidden;">
<span>最终显示效果</span>
<div style="width: 120px; height: 120px; overflow: hidden;">
<img id="smallImg" alt="" />
<input type="hidden" id="point" name="point" value="" />
<input type="hidden" id="imgUrl" name="imgUrl" value="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-offset-3 col-md-9">
<a id="Save" class="btn btn-primary">保存</a>
<a href="#" class="btn default" id="Cancel">返回</a>
</div>
</div>
</div>
</div>
</form>
</div>