با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به فراگیری دوره آموزش کوردوا هستند. در جلسه گذشته کار با پلاگین File System را آموختیم. در این جلسه آموزش کار با پلاگین File Transfer در کوردوا را خواهیم آموخت.
در آموزش کار با پلاگین File Transfer در کوردوا به شما خواهیم آموخت که چگونه از این پلاگین برای آپلود و دانلود فایل ها استفاده نمایید.
برای نصب این پلاگین باید دستور زیر را در پنجره command prompt اجرا کنید.
1 | C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer |
همان طور که اشاره شد در این جلسه می آموزیم که چطور فایل ها را آپلود و دانلود نماییم.
اجازه دهید که دو دکمه در index.html ایجاد نماییم.
1 2 | document.getElementById("uploadFile").addEventListener("click", uploadFile); document.getElementById("downloadFile").addEventListener("click", downloadFile); |
event listeners را در index.js در تابع onDeviceReady ایجاد خواهیم کرد سپس توابعclick events و callback اضافه خواهیم نمود.
1 2 | document.getElementById("uploadFile").addEventListener("click", uploadFile); document.getElementById("downloadFile").addEventListener("click", downloadFile); |
از این تابع برای دانلود فایل ها از سرور به device استفاده می شود.
فایل را در postimage.org آپلود می کنیم تا کار را ساده تر نماییم.
احتمالاً می خواهید که از سرور شخصی خود استفاده نمایید. تابع در index.js جایگذاری می شود و هنگام فشرده شدن دکمه نمایش داده خواهد شد.
uri سرور لینک دانلود است و fileURI مسیر پوشه DCIM روی device است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | function downloadFile() { var fileTransfer = new FileTransfer(); var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg"); var fileURL = "///storage/emulated/0/DCIM/myFile"; fileTransfer.download( uri, fileURL, function(entry) { console.log("download complete: " + entry.toURL()); }, function(error) { console.log("download error source " + error.source); console.log("download error target " + error.target); console.log("download error code" + error.code); }, false, { headers: { "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==" } } ); } |
هنگامی که بر روی دکمه DOWNLOAD کلیک نمایید فایل از سرور postimg.org به دستگاه موبایل دانلود می شود.
می توان پوشه تعیین شده را بررسی کرد و دید که myFile در آن جا قرار دارد.
خروجی کنسول چیزی شبیه به تصویر زیر خواهد بود.
حالا می خواهیم تابعی بسازیم که فایل ها را برداشته و آن را در سرور آپلود می کند.
درست مانند قبل سعی می کنیم این فرآیند را نیز تا حد امکان ساده نماییم؛ بنابرین از سرور آنلاین به عنوان تست استفاده می نماییم.
در این فرآیند ارزش uri برای ارسال به posttestserver لینک خواهد شد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function uploadFile() { var fileURL = "///storage/emulated/0/DCIM/myFile" var uri = encodeURI("http://posttestserver.com/post.php"); var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1); options.mimeType = "text/plain"; var headers = {'headerParam':'headerValue'}; options.headers = headers; var ft = new FileTransfer(); ft.upload(fileURL, uri, onSuccess, onError, options); function onSuccess(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } function onError(error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } |
حالا می توان با فشردن دکمه UPLOAD این تابع را نمایش داد.
با فشردن این دکمه خروجی کنسول ما پیام تصدقی دریافت خواهد کرد مبنی بر این که آپلود (uploading ) با موفقیت صورت گرفته است.
علاوه بر این می توان سرور را بررسی نماییم تا مطمئن شویم که فایل به درستی آپلود شده است.
در این جلسه با پلاگین File Transfer و نحوه انتقال فایل و دانلود و آپلود فایل را در کوردوا آموختیم.
در جلسه بعد آموزش کار با پلاگین Globalization را در اختیار شما قرار می دهیم.
با پی وی لرن همراه باشید.