我正在我的项目中使用Jcrop。问题不是很严重,但如果我能解决它会更好。
我可以通过ajax请求(而不是Jquery ajax)上传图像,并且在上传后无需刷新页面即可加载图像到页面。到目前为止,一切都运行良好。但是,在图片加载到页面后,Jrop没有变得活动起来,需要刷新页面才行。这是Jcrop激活器脚本:
jQuery(window).load(function(){
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 3/4
});
});
我不确定这个脚本是否重要,它不在$(document).ready(function(){}内。
我尝试使用$('#cropbox').load和$('#cropbox').click函数来触发Jcrop,而不是jQuery(window).load(function(){}函数,但什么也没有发生。
你有什么想法吗?是否可能在通过ajax请求将图像加载到页面后立即激活Jcrop而无需刷新浏览器?
这里是Jcrop的用法:
// Remember to invoke within jQuery(window).load(...)
// If you don't, Jcrop may not initialize properly
$(window).load(function(){
var imgWidth = $('#cropbox').width();
var imgHeight = $('#cropbox').height();
$('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 3/4,
setSelect: [ ((imgWidth/2)-60), 60, ((imgWidth/2)+60), 220 ],
addClass: 'custom',
bgColor: 'yellow',
bgOpacity: .8,
sideHandles: false
});
});
以及图片上传按钮:
<button onclick="ajaxUpload(this.form,'http://www.yemeklog.com/ajax/ajaxupload.php?filename=filename&maxSize=9999999999&maxW=400&fullPath=http://www.yemeklog.com/images/users/160/&relPath=../images/users/160/&colorR=120&colorG=120&colorB=120&maxH=600','upload_area','<img src=\'http://static.yemeklog.com/images/ajax-bar-loader.gif\' width=\'220\' height=\'19\' border=\'0\' />','<img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /> An error occured. Please contact.'); return false;">Upload Image</button>
还有ajaxupload.js文件:
function $m(theVar){
return document.getElementById(theVar)
}
function remove(theVar){
var theParent = theVar.parentNode;
theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
if(obj.addEventListener)
obj.addEventListener(evType, fn, true)
if(obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
if(obj.detachEvent){
obj.detachEvent('on'+type, fn);
}else{
obj.removeEventListener(type, fn, false);
}
}
function isWebKit(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
var detectWebKit = isWebKit();
form = typeof(form)=="string"?$m(form):form;
var erro="";
if(form==null || typeof(form)=="undefined"){
erro += "Hata kodu: 1.\n";
}else if(form.nodeName.toLowerCase()!="form"){
erro += "Hata kodu: 2.\n";
}
if($m(id_element)==null){
erro += "Hata kodu: 3.\n";
}
if(erro.length>0){
alert("Yükleme esnasında hata oluştu:\n" + erro);
return;
}
var iframe = document.createElement("iframe");
iframe.setAttribute("id","ajax-temp");
iframe.setAttribute("name","ajax-temp");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");
form.parentNode.appendChild(iframe);
window.frames['ajax-temp'].name="ajax-temp";
var doUpload = function(){
removeEvent($m('ajax-temp'),"load", doUpload);
var cross = "javascript: ";
cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
$m(id_element).innerHTML = html_error_http;
$m('ajax-temp').src = cross;
if(detectWebKit){
remove($m('ajax-temp'));
}else{
setTimeout(function(){ remove($m('ajax-temp'))}, 250);
}
$('#ajax_image_container').slideDown('slow');
}
addEvent($m('ajax-temp'),"load", doUpload);
form.setAttribute("target","ajax-temp");
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
form.submit();
}