ایمان اختیاری
جمعه 05 تیر 1394, 19:03 عصر
دوستان دارم روی همچین چیزی کار می کنم به مشکل خوردم... .. یه مودال می یاد بالا که کاربر متن رو ویرایش کنه و دکمه ذخیره رو بزنه .. تا اینجا همه چی اوکی بود .. اما گفت می خوام عکس متن رو هم همونجا ویراش کنم.. مجبور شدم یه اپلود بذارم و یه دکمه برای اپلود .. دکمه اپلود رو که می زدم مودال می رفت یا هنگ می کرد.. با جی کوئری درستش کردم. حالا وقتی می خوام سیو کنم باید یه فانکشن فراخوانی کنم که سیو کنه تغییرات رو که نمی کنه ..همش internal server error می ده ..
فایل webform6.aspx
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>
<link href="styles/test.css" rel="stylesheet" />
<script>
$(function () {
modalPosition();
$(window).resize(function () {
modalPosition();
});
$('.openModal').click(function (e) {
var bar = $('.bar');
bar.width('0%')
var percent = $('.percent');
percent.html('0%');
var status = $('#status');
status.empty();
$("#fupload").val("");
$("#imgprv").attr("src", "");
$('.modal, .modal-backdrop').fadeIn('fast');
e.preventDefault();
});
$('.close-modal').click(function (e) {
$('.modal, .modal-backdrop').fadeOut('fast');
});
$("#btnUpload").click(function (evt) {
if ($("#fupload").val() == "") {
alert('Select any picture');
evt.preventDefault();
}
else {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
url: "FileUploadHandler.ashx",
type: "POST",
beforeSend: function () {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function () {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
myfunction();
$('.modal, .modal-backdrop').fadeOut(150);
myfunction();
},
complete: function (xhr) {
status.html(xhr.responseText);
}
});
}
});
//Image preview
prvimg = {
UpdatePreview: function (obj) {
if (!window.FileReader) {
} else {
var reader = new FileReader();
var target = null;
reader.onload = function (e) {
target = e.target || e.srcElement;
$("#imgprv").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
function modalPosition() {
var width = $('.modal').width();
var pageWidth = $(window).width();
var x = (pageWidth / 2) - (width / 2);
$('.modal').css({ left: x + "px" });
}
function myfunction() {
$.ajax({
type: "GET",
url: "WebForm6.aspx/settext",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$("#content").html(result.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="btn_open" runat="server" Text="Upload files" CssClass="openModal" />
<div class="modal">
<div class="modal-header">
<h3>upload file in popup in asp.net using jquery <a class="close-modal" href="#">×</a></h3>
</div>
<div class="modal-body">
<div class="uploadfile">
<table>
<tr>
<td>File:</td>
<td>
<asp:FileUpload ID="fupload" runat="server" onchange='prvimg.UpdatePreview(this)' /></td>
<td>
<asp:Image ID="imgprv" runat="server" Height="90px" Width="75px" /></td>
</tr>
</table>
<div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
<div id="status"></div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnUpload" runat="server" CssClass="button" Text="Upload Selected File" />
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</form>
هندلر fileupload
public class FileUploadHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fname = context.Server.MapPath("~/uploads/" + file.FileName);
file.SaveAs(fname);
}
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
}
}
public bool IsReusable {
get {
return false;
}
}
کد فایل webform6
[System.Web.Script.Services.ScriptMethod] public void settext()
{
TextBox1.Text = "this is a test ";
}
فایل webform6.aspx
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>
<link href="styles/test.css" rel="stylesheet" />
<script>
$(function () {
modalPosition();
$(window).resize(function () {
modalPosition();
});
$('.openModal').click(function (e) {
var bar = $('.bar');
bar.width('0%')
var percent = $('.percent');
percent.html('0%');
var status = $('#status');
status.empty();
$("#fupload").val("");
$("#imgprv").attr("src", "");
$('.modal, .modal-backdrop').fadeIn('fast');
e.preventDefault();
});
$('.close-modal').click(function (e) {
$('.modal, .modal-backdrop').fadeOut('fast');
});
$("#btnUpload").click(function (evt) {
if ($("#fupload").val() == "") {
alert('Select any picture');
evt.preventDefault();
}
else {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
url: "FileUploadHandler.ashx",
type: "POST",
beforeSend: function () {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function () {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
myfunction();
$('.modal, .modal-backdrop').fadeOut(150);
myfunction();
},
complete: function (xhr) {
status.html(xhr.responseText);
}
});
}
});
//Image preview
prvimg = {
UpdatePreview: function (obj) {
if (!window.FileReader) {
} else {
var reader = new FileReader();
var target = null;
reader.onload = function (e) {
target = e.target || e.srcElement;
$("#imgprv").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
function modalPosition() {
var width = $('.modal').width();
var pageWidth = $(window).width();
var x = (pageWidth / 2) - (width / 2);
$('.modal').css({ left: x + "px" });
}
function myfunction() {
$.ajax({
type: "GET",
url: "WebForm6.aspx/settext",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$("#content").html(result.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="btn_open" runat="server" Text="Upload files" CssClass="openModal" />
<div class="modal">
<div class="modal-header">
<h3>upload file in popup in asp.net using jquery <a class="close-modal" href="#">×</a></h3>
</div>
<div class="modal-body">
<div class="uploadfile">
<table>
<tr>
<td>File:</td>
<td>
<asp:FileUpload ID="fupload" runat="server" onchange='prvimg.UpdatePreview(this)' /></td>
<td>
<asp:Image ID="imgprv" runat="server" Height="90px" Width="75px" /></td>
</tr>
</table>
<div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
<div id="status"></div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnUpload" runat="server" CssClass="button" Text="Upload Selected File" />
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</form>
هندلر fileupload
public class FileUploadHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fname = context.Server.MapPath("~/uploads/" + file.FileName);
file.SaveAs(fname);
}
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
}
}
public bool IsReusable {
get {
return false;
}
}
کد فایل webform6
[System.Web.Script.Services.ScriptMethod] public void settext()
{
TextBox1.Text = "this is a test ";
}