由于兼容性,我已经使用iframe实现了AJAX上传,但是现在我尝试将AJAX uplaod返回的结果与jcrop
绑定在一起,因为结果将在以后加载。
PHP输出采用以下格式:
<img src="upload/'.$new_name.'" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onsubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="Crop Image" class="btn btn-large btn-inverse" />
</form>
我的问题是
jcrop
不与图像绑定。这是因为要绑定到
jQuery
的enter code here
应该在AJAX上传发布结果之后运行吗?还是应该自动与图像绑定?jcrop
的JS 如下:<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
任何人都可以建议为什么js不与图像绑定吗?或提供任何建议?
最佳答案
问题在于js脚本在上传图像时js函数试图绑定到不存在的id,这就是js脚本无法运行的原因。上面文件中的js必须在加载图像的末尾放入js函数中,因此,在加载图像后,jquery将id绑定到jcrop。
例如旧脚本。
<script type="text/javascript">
$(document).ready(function () {
$("#formsubmit").click(function (event) {
event.preventDefault();
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');
$("body").append(iframe);
var form = $('#theuploadform');
form.attr("action", "uploader.php");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("file", $('#userfile').val());
form.submit();
$("#postiframe").load(function () {
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
$("#postiframe").remove();
$(document).find('#postiframe').remove();
});
});
});
</script>
<script type="text/javascript">
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
</script>
变成:
<script type="text/javascript">
$(document).ready(function () {
$("#formsubmit").click(function (event) {
event.preventDefault();
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');
$("body").append(iframe);
var form = $('#theuploadform');
form.attr("action", "uploader.php");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("file", $('#userfile').val());
form.submit();
$("#postiframe").load(function () {
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
$("#postiframe").remove();
$(document).find('#postiframe').remove();
//attempt at joining
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
});
});
});
</script>