دسته بندی ها
08:39 1399/04/28

آپلود فایل با یک دکمه توسط jquery

مشخصات سوال کننده :
کاربر : Kpa91     امتیاز کاربر : 12     رتبه کاربر : 59
دسته بندی : Asp.net Web Form

به این سوال امتیاز بدهید    0
تعداد بازدید این سوال : 4019
پاسخ دهنده : mohammad-i 12:59 1399/04/28

شما از رویداد click استفاده کردید. باید از رویداد onchange استفاده کنید.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

 

به این پاسخ امتیاز بدهید    0
امتیاز: 260 رتبه: 7
پاسخ دهنده : Kpa91 14:49 1399/04/28

جناب محمد تشکر از پاسختان

اما متاسفانه با کپی کردن سورس شما به داخل پروژه ام نتیجه ای حاصل نشد  شاید ضعف از توضیح من بوده که دقیقتر بیان می کنم

دکمه من در Asp.net یک button  سمت سرور است که اواین خط آن تست می کند که ابا فایل آپلود شده یا نه و اگر نشده بود همان جا از روتین خارج میشود  اگر از دکمه سمت کلاینک استفاده کنم ( یعنی دستور input) از رویداد onchange ایراد می گیرد و اعلام می کند که ناشناخته است که ظاهرا مشکل از اختلاف ورژن html می باشد.

برنامه از سورس شما ایرادی نگرفت اما حتی پنجره انتخاب فایل هم باز نشد. 

به این پاسخ امتیاز بدهید    0
امتیاز: 12 رتبه: 59
پاسخ دهنده : mohammad-i 16:09 1399/04/28

واسه اینکه جواب سریع و بهتری تری بگیرید، همیشه سعی کنید کدهاتون هم بزارید.

من به صورت کلی توضیح میدم، شما کدهاتون رو براساس این توضیحات تغییر بدید.

به صورت معمول برای آپلود فایل ما یه button و یه file upload برای انتخاب فایل میزاریم. در این حالت شما ابتدا با file Upload فایل رو انتخاب و سپس با button، فایل رو آپلود می کنید.

ولی در سناریو شما، دیگه نیازی به button  نیست و با یک file upload  و کدهای جوااسکریپ این عمل انجام میشه. به این شکل که میگیم بعد از انتخاب فایل، form مربوطه که file upload داخلش هست رو submit کن.

Form With File Upload:

<form id="myForm" action="/action_page.php" >
  <input type="file" id="myFile" name="filename" />
  <input type="submit"/>
</form>
</code></pre>

javascript:


document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById("myFile").onchange = function() {
    
    document.getElementById("myForm").submit();
};
});

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

ویرایش شده در شنبه 28 تیر 1399 ساعت 16:51:59
به این پاسخ امتیاز بدهید    1
امتیاز: 260 رتبه: 7
پاسخ دهنده : Kpa91 21:24 1399/04/28

ممنون من این رو حتما انجام میدم اما این توضیح هم بدم که تمام کنترل های من سمت سرور هستند و مثلا چک کردن شرط Myfile.hasfile امکان پذیر نیست چون شما Myfile رو سمت کلاینت تعریف کرده اید اینها رو امتحان کردم یعنی یک کنترل html از نوع file روی صفحه یا فرم قرار دادم ولی شروط مورد نظر اجرا نشدند یا لحظه کد نویسی asp.net روشون گیر داده .یا نمی تونم از دکمه submit استفاده کنم چون تمام کدهای سمت سرور رو از دست میدم و اگر هم کدها رو ببرم تو یک روتین و صداشون بزنم احتمال داره مسیر پیچیده تر بشه و خوانایی برنامه کاهش پیدا می کنه. به هر حال سپاسگذارم و فرمایشات شما رو مو به مو و با دقت انجام میدم امیدوارم مشکل حل بشه

به این پاسخ امتیاز بدهید    0
امتیاز: 12 رتبه: 59
پاسخ دهنده : Kpa91 00:10 1399/04/29

درود و عرض ادب

جناب محمد

کدهایی رو در stackoverflow پیدا کردم که همون حرف شما بود با این تفاوت که هم سمت سرور داشت هم کلاینت و دقیقا چیزی شد که خواستم  تفاوت این کدها با مال شما در این بود که کنترل Fileupload آن سمت سرور بود و یک دکمه سمت سرور و یک دکمه سمت کلاینت داشت دکمه سمت سرور مخفی میشد اما رویداد کلیک آن در دکمه سمت کلاینت اجرا میشد 

 function showBrowseDialog() {
        var fileuploadctrl = document.getElementById('<%= AttachFile.ClientID %>');
        fileuploadctrl.click();
        }

function upload() {        
        var btn = document.getElementById('<%= btnUpload.ClientID %>');
        btn.click();
        }

رویداد showBrowseDialog در کلیک دکمه سمت کلاینت عمل می کند و رویداد Upload در تعریف fileupload گنجانده شده یعنی این شکلی

<asp:FileUpload ID="AttachFile" runat="server"  style="display:none" EnableViewState="False" onchange="upload()"  />      

<input id="Button1" type="button" value="بارگذاری" onclick="showBrowseDialog()" />

دکمه سمت سرور هم با نام btnUpload که در رویداد Upload() دیده میشود پنهان مانده و عملیاتهای سمت سرور را انجام می دهد (مثل ذخیره سازی و...)

به هر حال از همکاری شما سپاسگذارم

به این پاسخ امتیاز بدهید    0
امتیاز: 12 رتبه: 59
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود