مثال على قراءة ملف محلي باستخدام JavaScript

كيف يمكن استخدام الملفات المحلية في browser؟

الموضوع اليوم هو عرض الملفات المحلية باستخدام browser.

بسبب قيود سياسة الأمان المتعلقة بالbrowser، لا يمكن للبرنامجjavascript الوصول الحر إلى الموارد المحلية، وهو شيء يجب اتباعه كقاعدة يجب الالتزام بها للحفاظ على أمان معلومات المستخدم. إذا كان يمكن للبرنامجjavascript على الإنترنت الوصول بسهولة إلى الموارد المحلية للمستخدم الرئيسي، فإن مستخدمو browser سيكونون بلا أمان على الإطلاق. على الرغم من هذه القيود الأمنية، ولكن في حالة الحصول على موافقة المستخدم، يمكن للbrowser الوصول إلى الموارد المحلية.

طريقة الحصول على الموافقة المستخدمة هي من خلال العلامة لتحديد الملف يدويًا، هذا العملية هي عملية منح المستخدم صلاحية الوصول. ثم استخدم ملف File للحصول على عنوان URL من خلال URL.createObjectURL(file) لتحويله إلى عنوان URL، يمكن استخدامه في علامات مثل img،video،audio،الخ. لقد قمت بإنشاء ميزة تحويل ملفات المحلية إلى URL ككلاس.

function LocalFileUrl(){
 var _this = this;
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls=[];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  console.log("change");
  //إذا كانت _this.urls غير فارغة، يتم إطلاق url
  if(_this.urls){
   _this.urls.forEach(function(url,index,array){
    URL.revokeObjectURL(url.url);//بمجرد إطلاقها، لا يمكن استخدام موارد هذا URL بعد الآن
   });
   _this.urls = [];
  }
  $(this.files).each(function(index,file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url,file:file});
  });
  typeof _this.getted == 'function' && _this.getted(_this.urls);
 )
}
/*
شرح المعلمات: getted:function(urls){}
urls هو مجموعة من عناصر url. [url]
url = {
url:url, // عنوان الملف المختار
file:file // الملف المختار
}
*/
LocalFileUrl.prototype.getUrl = function(getted){
 this.getted = getted;
 $("#"+ this.input_id).click();
}

طريقة الاستخدام:

var localFileUrl = new LocalFileUrl();//إنشاء مثيل
//يتم إطلاق القراءة، وتحديد نافذة اختيار الملفات، واستماع إلى حادث اختيار الملف  
localFileUrl.getUrl(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
)

تحويل باستخدام promise لـ jQuery

فوائد هذا الأسلوب هو أنه يمكن استخدامه بطريقة سلسة، بالإضافة إلى إمكانية ربط عدة معالجات لحوادث done، وتنفيذها وفقًا للترتيب الذي تم ربطها به

function LocalFileUrl(){
 this.dtd ={};
 this.input_id = 'input_getLocalFile'+ Math.round(Math.random() * 1000);
 $("body").append("<input type='file' style='display:none' id='"+this.input_id+"' multiple>");
 this.urls=[];
 var _this = this;
 $("#" + this.input_id).change(function(e){
  //إذا كانت _this.urls غير فارغة، يتم إطلاق url
  if(_this.urls){
   _this.urls.forEach(function(url,index,array){
    URL.revokeObjectURL(url.url);//بمجرد إطلاقها، لا يمكن استخدام موارد هذا URL بعد الآن
   });
   _this.urls = [];
  }
  $(this.files).each(function(index,file){
   var url = URL.createObjectURL(file);
   _this.urls.push({url:url,file:file});
  });
  //يتم إدخال مجموعة اختيارية من المعلمات
  _this.dtd.resolveWith(window,new Array(_this.urls));
 )
}
/*
يعود بـ promise لـ jquery، يمكن ربطه بمؤشر الحدث done().done(urls) يستلم قائمة من urls
{
 url:url:
 file:file// 选取的ملف الموضوع
}
*/
LocalFileUrl.prototype.getUrl = function(){
 this.dtd = $.Deferred();
 $("#"+ this.input_id).click();
 return this.dtd.promise();
}

طريقة الاستخدام

var localFilrUrl = new LocalFileUrl();
// تحديد واقعة done
localFileUrl.getUrl().done(function(urls){
 urls.forEach(function(item,index,array){
  $("body").append("<div>"+index+"----"+item.url+"</div>")
 )
}).done(function(){
 console.log("إنهاء");
}).done(function(){
 alert("تم قراءة مسار الملف المحلي");
)

توافق

URL.createObjectURL(File/Blob) هو ميزة تجريبية.مستوى التوافق IE10 وما فوقالمترادف لها هو URL.revokeObjectURL(url)، ويُستخدم لقول للbrowser أن لا يحتاج إلى إشارة إلى هذا URL بعد الآن، يمكن إطلاقه. بعد التشغيل، يصبح هذا URL غير صالح فورًا.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية حقوق النشر لصاحب المقال، محتويات المقال تم تقديمها من قبل مستخدمي الإنترنت بطرقهم الخاصة، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية ذات صلة. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، وقدم الدليل على الشكوى، إذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم فورًا.