ورود

View Full Version : نمايش فايل انتخاب شده از المنت file



UnnamE
چهارشنبه 24 فروردین 1390, 22:33 عصر
با Jquery‌ ميشه محتواي فايل انتخاب شده رو نمايش داد؟
منظورم مثلا يه عكس رو انتخاب ميكنيم با استفاده از file input، خب چجور ميشه اون عكس رو نمايش داد قبل از آپلود؟

eleboys
پنج شنبه 25 فروردین 1390, 20:41 عصر
در کل با روش های معمولی به هیچ عنوان نمیشه به محتوای فایل های سیستم کاربر سمت کلاینت دسترسی پیدا کرد (به دلایل مشخص امنیتی) اما چون دراینجا قصد شما فقط نمایش تصویر هست مشکلی نداره و میتونید اینکار رو انجام بدید.
مقدار انتخاب شده درون المنت فایل رو که همون مسیر فایل تو کامپیوتر کاربر هستش رو بدست بیار و بعد یه "file:///" به اولش اضافه کن:

<img src="" id="imgPreview" />
<input type="file" id="fileImage" />

بعد از انتخاب فایل توسط کاربر کد زیر رو اجرا می کنی (در رویداد های مختلفی می تونی اینکار رو انجام بدی از جمله onchange, onblur ,...)

var imgpath = "file:///" + $("#fileImage").val();
$("#imgPreview").attr("src",imgpath);