PDA

View Full Version : مبتدی: reload صفحه با ajax



fatemefa
یک شنبه 14 آذر 1395, 14:00 عصر
سلام
من 1 اپلود عکس دارم که با 1 پارشیال عکس لود میکنم و به صورت لیست توی همون صفحه توی ویو دیگه نمایش میدم اما اتفاقی که می افته این کار همزمان انجام نمیشه و باید صفحه رفرش کنم تا عکس جدید اضافه بشه این کد ویو ممنون میشم اگه کسی وقت بزاره و مشکلم ببینه

@model Models.Class.ImageGallery
@{

}
<script src="~/Content/Theme/js/main-js/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>




<form id="imageUploadId">




<div class="row">
<div class="container">
<div class="text-center" id="progress">


<input id="ImageUrl" type="file">
<div class="text-center" id="img"></div>
<input type="submit" class="btn btn-success" value="آپلود تصویر" />


</div>
</div>
</div>


</form>


@using (Ajax.BeginForm("Index", "CulturalUnit", new AjaxOptions { HttpMethod = "Post" }))
{

<div style="border-bottom:1px solid Red;"></div>
if (Model.ImageList.Count > 0)
{
<div>
<div>
<div class="item">
@foreach (var image in Model.ImageList)
{
<div style=" margin:10px; float:left; height:200px; overflow:hidden; width:200px;">
<a id="ShowImage" class="fancybox-button" data-rel="fancybox-button"
title="Photo" href="@Url.Content("~/CulturalUnitFile/Photo/" + image)">
<div class="zoom">
<img src="@Url.Content("~/CulturalUnitFile/Photo/" + image)" class="imgBox" />
<div class="zoom-icon"></div>
</div>
</a>
</div>
}
</div>
</div>
</div>
}


}




<script type="text/javascript" language="javascript">


document.getElementById('imageUploadId').onsubmit = function () {


var serviceUrl = '/CulturalUnit/UploadImageMethod';
// دریافت فایل
var file = document.getElementById("ImageUrl").files[0];


// ایجاد یک شی از فرم دیتا
var formData = new FormData();


formData.append("filename", file);
$("#progress").html("<img id='upload_loading' src='/Content/Theme/images/image-main/loading36.gif' /><br><h3>درحال آپلود فایل</h3>");


$.ajax({
type: "POST",
url: serviceUrl,
data: formData,
contentType: false,
processData: false,
dataType: "json",
success: successFunc,
error: errorFunc,
complete: completeFunc
});


function successFunc(data, form) {


if (data[0] == "true") {


window.location.reload(true)
} else {

console.log(data[1]);
alert(data[1]);


}
}


// نمایش خطا
function errorFunc() {
alert("خطا در آپلود فایل");
}


// حذف لود
function completeFunc() {
$('#progress').empty();
}


}
//});


</script>

fatemefa
یک شنبه 14 آذر 1395, 22:51 عصر
ممنون مشکل حل شد.