PDA

View Full Version : آپلود تصویر در Razor Page با Ajax



davidrobert
جمعه 13 اردیبهشت 1398, 12:56 عصر
دوستان بنده عمل آپلود فایل انجام دادم 50 درصد به جواب رسیدم و فایل بنده بدون هیچ نوع مشکلی به سمت سرور آپلود و ذخیره میشه.
ولی چون فایل های بنده جدا هستش یعنی تصاویر پروفایل جدا ذخیره میشه در یک پوشه جدا که موقع اپلود پوشه مورد نظر ساخته میشه که برای پروفایل درست جواب میده برای امضا هم امدم همون روش پیش ببرم و جدا ذخیره کنم امضا ها رو ولی وقتی روی دکمه دوم میزنم اگه پروفایل هنوز داخل عکس باشه برای پروفایل رو آپلود میکنه و امضا رو آپلود نمیکنه من همه جور امضا رو بهش نشان میدم ولی میره سراغ دستور پروفایل.
دستورات سمت کلاینت

<form method="post" class="col-sm-6">
<div class="form-group row">
<label asp-for="Register.R_National_Code_Or_Passports" class="col-sm-3 col-form-label"></label>
<div class="col-sm-7">
<input asp-for="Register.R_National_Code_Or_Passports" class="form-control">
</div>
</div>
<div class="form-group row">
<label asp-for="UploadedFile" class="col-sm-3 col-form-label"></label>
<div class="col-sm-7">
<input asp-for="UploadedFile" class="form-control">
</div>
</div>
<div class="form-group row">

<div class="col-sm-7 offset-sm-3">
<button class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
<div class="form-group row">
<label asp-for="UploadedFileSign" class="col-sm-3 col-form-label"></label>
<div class="col-sm-7">
<input asp-for="UploadedFileSign" id="myfile" class="form-control">
</div>
</div>
<div class="form-group row">

<div class="col-sm-7 offset-sm-3">
<button class="btn btn-primary" id="submitSign">امضا</button>
</div>
</div>
</form>

@section scripts{
<script>
$(function () {
$('#submit').on('click', function (evt) {
evt.preventDefault();
$.ajax({
url: '?handler=OnPostAsync',
data: new FormData(document.forms[0]),
contentType: false,
processData: false,
type: 'post',
success: function () {
alert('Uploaded by jQuery');
}
});
});
});

$(function () {
$('#submitSign').on('click', function (evt) {
evt.preventDefault();
$.ajax({
url: '?handler=OnPostSignAsync',
data: new FormData(document.forms[0]),
contentType: false,
processData: false,
type: 'post',
success: function () {
alert('Uploaded by jQuery');
}
});
});
});


</script>
}


دستورات سمت سرور

public class IndexModel : PageModel
{
private Cls_NeedCode needCode = new Cls_NeedCode();
[BindProperty]
public Register.Select Register { get; set; }

private IHostingEnvironment _environment;
public IndexModel(IHostingEnvironment environment)
{
_environment = environment;
}


[BindProperty, Display(Name = "فایل")]
public IFormFile UploadedFile { get; set; }
public async Task OnPostAsync()
{
string path = Path.Combine(_environment.ContentRootPath, "wwwroot/uploads/Profile/" + this.Register.R_National_Code_Or_Passports);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
var file = Path.Combine(_environment.ContentRootPath, "wwwroot/uploads/Profile/" + this.Register.R_National_Code_Or_Passports, needCode.Generate_Unique_Number() + UploadedFile.FileName);

using (var fileStream = new FileStream(file, FileMode.Create))
{
await UploadedFile.CopyToAsync(fileStream);
}
}

[BindProperty, Display(Name = "امضا")]
public IFormFile UploadedFileSign { get; set; }
public async Task OnPostSignAsync()
{
string path = Path.Combine(_environment.ContentRootPath, "wwwroot/uploads/Sign/" + this.Register.R_National_Code_Or_Passports);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
var file = Path.Combine(_environment.ContentRootPath, "wwwroot/uploads/Sign/" + this.Register.R_National_Code_Or_Passports, needCode.Generate_Unique_Number() + UploadedFileSign.FileName);

using (var fileStream = new FileStream(file, FileMode.Create))
{
await UploadedFileSign.CopyToAsync(fileStream);
}
}

public void OnGet()
{
}
}

برای آپلود فایل اول جواب میده برای فایل دوم نه متاسفانه
150115
دوستان راهی هستش و مشکلی هستش بنده راهنمایی کنم ممنون میشم چون به این صورت جدا جدا فایل در پوشه مختلف ذخیره کنم زیاد دارم.

davidrobert
دوشنبه 16 اردیبهشت 1398, 15:29 عصر
دوستان آپلود تصویر توسط Ajax با امکان بررسی پسوند فایل، حجم فایل در سمت کلاینت و همین طور نمایش تصویر قبل از آپلود حتی به صورت Pop Up در Razor Pages
لینک دانلود (http://s9.picofile.com/file/8359603292/Ajax_Upload_File.rar.html)
امیدوارم از این فایل نهایت استفاده کنید.