•  29-09-2019
  •  | 
  •  

سؤال

شخص ما يمكن أن تعطيني مثالا على استخدام FileReader API يذهب للحصول على محتويات الملف في كروم ؟

يبدو أن عودته undefined بالنسبة لي.

<!doctype html>
<html>
<script>
function handle_files(files) {
  console.log(files)
  reader = new FileReader()
  ret = []
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    text = reader.readAsText(file) //readAsdataURL
    console.log(text) //undefined
    ret.push(text)
  }
  console.log(ret) // [undefined]

}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>
هل كانت مفيدة؟

المحلول

كانت مشكلتي أنني افترضت أن FileReader كان sychronous. هذه هي الطريقة الصحيحة للقيام بذلك. إذا كنت على Chrome ، فيجب أن يتم تشغيل هذا الرمز على خادم (مضيف محلي أو على موقع). لن يعمل مع ملف محلي.

<!doctype html>
<html>
<script>
function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i]
    console.log(file)
    var reader = new FileReader()
    ret = []
    reader.onload = function(e) {
      console.log(e.target.result)
    }
    reader.onerror = function(stuff) {
      console.log("error", stuff)
      console.log (stuff.getMessage())
    }
    reader.readAsText(file) //readAsdataURL
  }

}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>

نصائح أخرى

ملف API FileReader كائن تعمل بنفس الطريقة في كروم كما هو الحال في فايرفوكس, اوبرا, أو Internet Explorer 10 (نعم ، يعمل في IE).

مثال بسيط

تبدأ بإعلان مثيل جديد من قارئ:

var reader = new FileReader();

تحديد رد لمختلف الأحداث: 

reader.onloadend = function( ){
    document.body.style.backgroundImage = "url(" + this.result + ")";
}

ثم تمر عليه ما نصه:

reader.readAsDataURL( file );

كمان: http://jsfiddle.net/jonathansampson/K3A9r/

التعامل مع ملفات متعددة

عندما كنت تعمل مع ملفات متعددة الأمور مختلفة بعض الشيء.في حين أنه من الواضح أننا بحاجة إلى أكثر من دورة الناتجة FileList, سوف تحتاج أيضا إلى استخدام الإغلاق لمنع ملف البيانات من الحصول على العبث بها على العديد من التكرارات:

// Continue only if we have proper support
if ( window.FileReader ) {

  // Provide our logic upon the change even of our input
  document.getElementById("collection").onchange = function(){

    // Couple variables for handling each file
    var counter = -1, file;

    // Cycle over all files
    while ( file = this.files[ ++counter ] ) {

      // Create a reader for this particular file
      var reader = new FileReader();

      // Respond to the onloadend event of the reader
      reader.onloadend = (function(file){
        return function(){
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
          document.body.appendChild( image );
        }
      })(file);

      // Begin reading data for this file
      reader.readAsDataURL( file );
    }
  }
}​

كمان: http://jsfiddle.net/jonathansampson/jPTV3/

ميزة الكشف

على الرغم من أن FileReader هو متاح في ما يقرب من جميع المتصفحات الحديثة, كنت لا تزال تريد أن تكون متأكد من أنك لا يسبب أي المشاجرة للمستخدمين على المتصفحات القديمة.قبل استخدام FileReader, تأكد من التحقق من النافذة كائن وجودها:

if ( window.FileReader ) {
    // Safe to use FileReader
}

تشغيل محليا من الكروم

وأود أن أشير إلى أن تشغيل هذا في file:/// المسار في كروم سوف يؤدي إلى كسر في تجربة.افتراضي الإصدارات الحالية من كروم لا تسمح file:/// صفحات الوصول إلى الملفات الأخرى.يمكنك تغيير هذا السلوك تحميل كروم مع --allow-file-access-from-files العلم.

enter image description here

لاحظ أن هذا الأسلوب سوف تسمح فقط الوصول إلى الملفات عن الملفات على سبيل المثال من المتصفح فتح.إذا كنت تريد أن يكون هذا حال كل متصفح الحالات في المستقبل ، يمكن تعديل الاختصار من سطح المكتب الخاص بك.ببساطة انقر بزر الماوس الأيمن فوق كروم الاختصار ثم انتقل إلى خصائص.المقبل, إضافة العلم إلى نهاية الهدف.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top