javascript - معنى - w3schools test html




محاكاة حدث ملف الإسقاط (2)

هل من الممكن محاكاة / وهمية الحدث انخفاض باستخدام جافا سكريبت فقط؟ كيفية اختبار هذا النوع من الأحداث؟

خذ على سبيل المثال هذا دند تحميل صفحة عينة، هل من الممكن لتحريك الحدث "قطرة" مع ملف دون إسقاط ملف هناك في الواقع؟ دعونا نقول النقر على زر؟

لقد بدأت كتابة سوكولي النصي الذي يمكن السيطرة على الماوس والقيام خدعة ولكن كنت أبحث عن حل أفضل.

تصحيح

kol الجواب هو وسيلة جيدة للتخلص من الحدث السحب والإسقاط ولكن لا يزال لدي لتحديد ملف يدويا من جهاز الكمبيوتر الخاص بي. هذا هو الشيء أنا مهتم في محاكاة. هل هناك طريقة لإنشاء متغير ملف بشكل منهجي؟

var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];    

kol الجواب هو وسيلة جيدة للتخلص من الحدث السحب والإسقاط ولكن لا يزال لدي لتحديد ملف يدويا من جهاز الكمبيوتر الخاص بي. هذا هو الشيء أنا مهتم في محاكاة. هل هناك طريقة لإنشاء متغير ملف بشكل منهجي؟ -caiocpricci2

جرب هذا

function createFile(create) {
  var create = ["<!doctype html><div>file</div>"];
  var blob = new Blob([create], {"type" : "text/html"});
  return ( blob.size > 0 ? blob : "file creation error" )
};
createFile()

1. إسقاط صورة مختارة من قبل المستخدم

لقد جعلت جسفيدل . إنها نسخة مجردة من صفحة html5demos.com التي أشرت إليها، ولكن:

  • أضفت علامة <input type="file"> التي يمكن استخدامها لتحديد ملف صورة من الكمبيوتر المحلي، و
  • كما أضفت علامة <input type="button"> ondrop <input type="button"> مع معالج onclick ، الذي يحاكي حدث "دروب فيل" من خلال الاتصال مباشرة ondrop أحداث ondrop دند المستهدفة.

يبدو معالج الصور ondrop كما يلي:

holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
    readfiles(e.dataTransfer.files);
}

وهذا هو، علينا أن نمر حجة على ondrop ، والتي

  • يحتوي على حقل dataTransfer مع حقل فرعي مصفوفة files ، والذي يحتوي على File المحدد، و
  • لديه أسلوب preventDefault (وظيفة مع عدم وجود الجسم سوف تفعل).

وبالتالي فإن معالج أونكليك زر "محاكاة قطرة" هو ما يلي:

function simulateDrop() {
    var fileInput = document.getElementById('fileInput'),
        file = fileInput.files[0];        
    holder.ondrop({ 
        dataTransfer: { files: [ file ] }, 
        preventDefault: function () {} 
    });
}

اختبار

  1. حدد ملف صورة (ينغ أو جبيغ أو جيف)
  2. انقر على زر "محاكاة انخفاض"

نتيجة

2. إسقاط ملفات الاختبار التي تم إنشاؤها تلقائيا دون تفاعل المستخدم ( غوغل كروم فقط !!! )

لقد جعلت جسفيدل آخر. عند تحميل الصفحة، يتم استدعاء دالة، والتي:

  • بإنشاء ملف نصي في نظام الملفات المؤقت، و
  • تحميل وإسقاط هذا الملف النصي إلى الهدف <div> ؛ ثم
  • إنشاء ملف صورة في نظام الملفات المؤقتة، و
  • تحميل وإسقاط ملف الصورة هذا إلى الهدف <div> .

رمز دالة استدعاء دالة محاكاة هذا هو ما يلي:

(function () {
    var fileErrorHandler = function (e) {
            var msg = "";
            switch (e.code) {
                case FileError.QUOTA_EXCEEDED_ERR:
                    msg = "QUOTA_EXCEEDED_ERR";
                    break;
                case FileError.NOT_FOUND_ERR:
                    msg = "NOT_FOUND_ERR";
                    break;
                case FileError.SECURITY_ERR:
                    msg = "SECURITY_ERR";
                    break;
                case FileError.INVALID_MODIFICATION_ERR:
                    msg = "INVALID_MODIFICATION_ERR";
                    break;
                case FileError.INVALID_STATE_ERR:
                    msg = "INVALID_STATE_ERR";
                    break;
                default:
                    msg = "Unknown Error";
                    break;
            };
            console.log("Error: " + msg);
        },
        requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem,
        dropFile = function (file) {
            holder.ondrop({ 
                dataTransfer: { files: [ file ] }, 
                preventDefault: function () {} 
            });
        };

    if (!requestFileSystem) {
        console.log("FileSystem API is not supported");
        return;
    }
    requestFileSystem(
        window.TEMPORARY, 
        1024 * 1024, 
        function (fileSystem) {
            var textFile = {
                    name: "test.txt",
                    content: "hello, world",
                    contentType: "text/plain"
                },
                imageFile = {
                    name: "test.png",
                    content: "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
                    contentType: "image/png",
                    contentBytes: function () {
                        var byteCharacters = atob(this.content),
                            byteArrays = [], offset, sliceSize = 512, slice, byteNumbers, i, byteArray;

                        for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                            slice = byteCharacters.slice(offset, offset + sliceSize);
                            byteNumbers = new Array(slice.length);
                            for (i = 0; i < slice.length; i++) {
                                byteNumbers[i] = slice.charCodeAt(i);
                            }
                            byteArray = new Uint8Array(byteNumbers);
                            byteArrays.push(byteArray);
                        }
                        return byteArrays;
                    }
                };

            // Create and drop text file
            fileSystem.root.getFile(
                textFile.name, 
                { create: true }, 
                function (fileEntry) {
                    fileEntry.createWriter(
                        function (fileWriter) {
                            fileWriter.onwriteend = function(e) {
                                console.log("Write completed (" + textFile.name + ")");
                                fileSystem.root.getFile(
                                    textFile.name, 
                                    {}, 
                                    function (fileEntry) {
                                        fileEntry.file(
                                            function (file) {
                                                dropFile(file);
                                            }, 
                                            fileErrorHandler
                                        );
                                    }, 
                                    fileErrorHandler
                                );    

                            };
                            fileWriter.onerror = function(e) {
                                console.log("Write failed (" + textFile.name + "): " + e.toString());
                            };
                            fileWriter.write(new Blob([ textFile.content ], { type: textFile.contentType }));
                        }, 
                        fileErrorHandler
                    );
                }, 
                fileErrorHandler
            );

            // Create and drop image file
            fileSystem.root.getFile(
                imageFile.name, 
                { create: true }, 
                function (fileEntry) {
                    fileEntry.createWriter(
                        function (fileWriter) {
                            fileWriter.onwriteend = function(e) {
                                console.log("Write completed (" + imageFile.name + ")");
                                fileSystem.root.getFile(
                                    imageFile.name, 
                                    {}, 
                                    function (fileEntry) {
                                        fileEntry.file(
                                            function (file) {
                                                dropFile(file);
                                            }, 
                                            fileErrorHandler
                                        );
                                    }, 
                                    fileErrorHandler
                                );    

                            };
                            fileWriter.onerror = function(e) {
                                console.log("Write failed (" + imageFile.name + "): " + e.toString());
                            };
                            fileWriter.write(new Blob(imageFile.contentBytes(), { type: imageFile.contentType }));
                        }, 
                        fileErrorHandler
                    );
                }, 
                fileErrorHandler
            );
        }, 
        fileErrorHandler
    );    
})();

يتم إعطاء محتوى الملف النصي الذي تم إنشاؤه تلقائيا كسلسلة، ويتم إعطاء محتوى ملف الصورة كسلسلة مشفرة base64. هذه هي سهلة لتغيير. على سبيل المثال، يمكن أن يحتوي ملف النص الاختباري ليس فقط على نص عادي، ولكن هتمل أيضا. في هذه الحالة، لا تنسى تغيير الحقل textFile.contentType من text/plain إلى text/html ، وإضافة نوع المحتوى هذا إلى مصفوفة أنواع acceptedTypes و دالة previewfile . صورة الاختبار يمكن أيضا أن تتغير بسهولة، وتحتاج فقط إلى تحويل صورة إلى base64 .

اضطررت إلى تمديد رمز معالج الإسقاط للتعامل مع الملفات النصية بالإضافة إلى الصور:

acceptedTypes = {
    'text/plain': true, // <-- I added this
    'image/png': true,
    'image/jpeg': true,
    'image/gif': true
},

...

function previewfile(file) {
    if (tests.filereader === true && acceptedTypes[file.type] === true) {
        var reader = new FileReader();
        if (file.type === 'text/plain') { // <-- I added this branch
            reader.onload = function (event) {
                var p = document.createElement("p"); 
                p.innerText = event.target.result;
                holder.appendChild(p);
            }
            reader.readAsText(file);
        } else {
            reader.onload = function (event) {
                var image = new Image();
                image.src = event.target.result;
                image.width = 250; // a fake resize
                holder.appendChild(image);
            };
            reader.readAsDataURL(file);
        }
    } else {
        holder.innerHTML += '<p>Uploaded ' + file.name + ', ' + file.size + ' B, ' + file.type;
        console.log(file);
    }
}

لاحظ أنه بعد تحميل جسفيدل ، يمكن إدراج الملفات التي تم إنشاؤها تلقائيا لأغراض التصحيح:

نتيجة

تظهر لقطة الشاشة أن قطرة محاكاة إدراج محتوى الملف النصي الذي تم إنشاؤه تلقائيا قبل الصورة التي تم إنشاؤها تلقائيا. يبدو رمز هتمل ل دند-تارجيت <div> كما يلي:

<div id="holder" class="">
    <p>hello, world</p>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggkFBTzlUWEwwWTRPSHdBQUFBQkpSVTVFcmtKZ2dnPT0=" width="250">
</div>




drag-and-drop