فایل آپلود و مقداردهی fileupload داینامیک

[Wily_Fox]

با سلام و خسته نباشید

یه فایل آپلود دارم می نویسم. به یه مشکل برخورد کردم.

توضیح صورت مسئله:
فرض کنید فقط یه دونه fileupload داریم می خواهیم با کلیک بروی این فایل آپلود ابتدا تصویر preview بشه سپس دو تا دکمه در کنار اون قرار بگیره که با کلیک برروی اولی فایل آپلود بشه و با کلیک برروی دومی حذف بشه.

تا اینجای کار مشکلی نیست.

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

کدهایی که نوشتم:


$("#fileInputButton_img").click(function () {
$("#file_input_image").trigger('click');
});



$("#file_input_image").change(function () {
ReadImageURL(this);
$("#Preview_section").fadeIn(500);
});




function ReadImageURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var title = $("#ImageTitle").val().toString();
var subject = $("#ImageSubject").val().toString();
$("#Preview_section").append("<div class='preview'><div class='file_preview'><img id='x' src='" + e.target.result + "' /></div>" +
"<div class='file_content'><div class='file_title'>" + title + "</div>" +
"<div class='file_subject'>" + subject + "</div><div class='file_type'><div class='file_details'><span>size: 320*240</span>" +
"<span>Name: 125479584.jpg</span></div><div class='file_access'><input type='button' value='آپلود' class='startupload' />" +
"<input type='button' value='حذف' class='deletefile' /></div></div></div>" +
"" +
"</div>");

$("#ImageTitle").val(" ");
$("#ImageSubject").val(" ");

var path = $('#file_input_image').attr('value');
$(".deletefile").click(function () {
$(this).parent().parent().parent().parent().remove ().fadeOut(500);
});
}
reader.readAsDataURL(input.files[0]);
}
}


اینم تصویری از اون چیزی که تا حالا نوشتم

[ali_autumnal]

من کد شما رو به شکل زیر تغییر دادم درست شد:


var counter = 0;
$("#fileInputButton_img").click(function () {
var $file_input_image = $("<input type='file' class='file_input_hidden' id='file_input_image_"+counter.toString()+"' name='files' accept='image/*'/>");
$("#files_input").append($file_input_image);
$("#file_input_image_" + counter.toString()).trigger('click');

$("#file_input_image_" + counter.toString()).change(function () {
ReadImageURL(this);
$("#Preview_section").fadeIn(500);
});

++counter;
});


البته باید در نظر داشته باشید که در سمت سرور بایستی لیستی از فایل ها رو با نام files دریافت کنید.

[Wily_Fox]

درواقع شما هربار یه fileupload ایجاد می کنید و اون رو show می کنید کاربر تصویر رو انتخاب می کنه و تصویر رو preview می کنید.

یعنی بجای اون دو قسمت اول شما یه تابع نوشتید؟

[Wily_Fox]

راستی شما گفتید همه فایل ها رو با هم در سمت سرور دریافت کنم. اما من می خوام تک تک دریافت کنم؟

[ali_autumnal]

آره دقیقا. اونطور عمل میکنه.

بله من بجای اون دو قسمت این تابع رو نوشتم.

البته با این روش هم می تونید همه رو با هم ارسال کنید و یا اگر کاربر خواستید تک تک ارسال کنه واسه اون هم تو همون تابع به button مر بوطه یه رویداد اضافه کنید و فایل آپلود رو بهش نسبت بدید.

موفق باشید