Folowing here教程我尝试在我的应用程序基于ZendFramework 2实现。 我创建了所有作者所说的内容,当我测试图像成功上传并且别名保存在数据库中时。但问题是ajax上传后不显示重新定位而不显示图像。我必须刷新浏览器才能看到新图像。
我的代码:
char m[100];
int i;
for(i = 0; i < 5; i++)
if(i == 2)
m[i] = ' ';
else
m[i] = i;
&#13;
<script>
$(document).ready(function()
{
/* Uploading Profile BackGround Image */
$('body').on('change','#bgphotoimg', function()
{
$("#bgimageform").ajaxForm({target: '#timelineBackground',
beforeSubmit:function(){},
success:function(){
$("#timelineShade").hide();
$("#bgimageform").hide();
},
error:function(){
} }).submit();
});
/* Banner position drag */
$("body").on('mouseover','.headerimage',function ()
{
var y1 = $('#timelineBackground').height();
var y2 = $('.headerimage').height();
$(this).draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui)
{
}
});
});
/* Bannert Position Save*/
$("body").on('click','.bgSave',function ()
{
var id = $(this).attr("id");
var p = $("#timelineBGload").attr("style");
var Y =p.split("top:");
var Z=Y[1].split(";");
var dataString ='position='+Z[0];
$.ajax({
type: "POST",
url: "image_saveBG_ajax_bg.php",
data: dataString,
cache: false,
beforeSend: function(){ },
success: function(html)
{
if(html)
{
$(".bgImage").fadeOut('slow');
$(".bgSave").fadeOut('slow');
$("#timelineShade").fadeIn("slow");
$("#timelineBGload").removeClass("headerimage");
$("#timelineBGload").css({'margin-top':html});
return false;
}
}
});
return false;
});
});
</script>
&#13;
#timelineBackground {
height: 315px;
position: relative;
margin-top: -20px;
overflow: hidden;
background-color:#ccc;
}
#timelineProfilePic {
width: 170px;
height: 170px;
background-color: #ffffff;
position: absolute;
margin-top: -145px;
margin-left: 20px;
z-index: 1000;
overflow: hidden;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#timelineTitle {
color: #ffffff;
font-size: 24px;
margin-top: -45px;
position: absolute;
margin-left: 206px;
font-weight: bold;
text-rendering: optimizelegibility;
text-shadow: 0 0 3px rgba(0,0,0,.8);
z-index: 999;
text-transform: capitalize;
}
#timelineShade {
min-height: 95px;
position: absolute;
margin-top: -95px;
width: 100%;
}
#timelineNav {
background-color: #ffffff;
min-height: 43px;
margin-bottom: 10px;
position: relative;
}
.timelineUploadBG {
position: absolute;
margin-top: 50px;
margin-left: 813px;
height: 32px;
width: 32px;
}
.uploadFile {
background: url('../images/whitecam.png') no-repeat;
height: 32px;
width: 32px;
overflow: hidden;
cursor: pointer;
}
.uploadFile input {
filter: alpha(opacity=0);
opacity: 0;
margin-left: -110px;
}
.custom-file-input {
height: 25px;
cursor: pointer;
}
.bgImage,#timelineBGload
{
width:100%;
}
.headerimage {
cursor: s-resize;
position: absolute;
}
.wallbutton:hover {
text-decoration: none;
}
.blackButton {
background-color: #666666;
border-color: #333333;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.bgSave {
position: absolute;
margin-top: 267px;
margin-left: 760px;
z-index: 4000;
}
.wallbutton {
font-weight: bold;
padding: 7px 9px;
background-color: #5fcf80;
color: #fff !important;
font-size: 12px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
cursor: pointer;
text-decoration: none;
border-width: 1px 1px 3px !important;
border-style: solid;
border-color: #3ac162;
white-space: nowrap;
display: -moz-inline-stack;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
&#13;