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>
من 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>