上传后jQuery封面图片重新定位

时间:2016-03-21 14:24:59

标签: php jquery ajax jquery-forms-plugin

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;
&#13;
&#13;

0 个答案:

没有答案