تعليق: يقدم هذا المقال بشكل أساسي التنفيذ المحدد لـ HTML5 قراءة الملفات المحلية. نمط هيكل HTML ، نمط CSS ورمز JS على النحو التالي. يمكن للأصدقاء الذين يحتاجون إلى إلقاء نظرة
نمط هيكل HTML كما يلي:<viv>
<button> أضف صورة </button>
<Porm>
أقل
</form>
</div>
<img src = "">
من وجهة نظر نمط العرض ، يجب عدم عرض مربع الإدخال لعنصر الإدخال. في هذا الوقت ، يجب ضبط الإدخال على نمط شفاف ثم الكتابة فوقه فوق عنصر الزر. عندها فقط يمكن النقر فوق الزر لتحميل الصورة. تعيين مقبول على Image/*، يُسمح فقط بتحميل ملفات الصورة.
نمط CSS كما يلي
.addpic {
الموقف: قريب
الهامش اليساري: 100px ؛
العرض: 95 بكسل ؛
الارتفاع: 30 بكسل ؛
}
.addlogo {
الخلفية: لا شيء تكرار التمرير 0 0 rgba (0 ، 0 ، 0 ، 0) ؛
المؤشر: مؤشر.
حجم الخط: 30 بكسل ؛
العتامة: 0 ؛
الموقف: مطلق ؛
اليمين: 0 ؛
أعلى: 0 ؛
Z-Index: 10 ؛
}
رمز JS
وظائف القراءة (evt) {
ملفات var = evt.target.files ؛
إذا (! ملفات) {
console.log ("الملف IS invaild") ؛
يعود؛
}
لـ (var i = 0 ، file ؛ file = files [i] ؛ i ++) {
var imgele = new image () ؛
var thesrc = window.url.createObjecturl (file) ؛
imgele.src = thesrc ؛
imgele.onload = function () {
$ ("#showlogo"). attr ("src" ، this.src) ؛
}
}
}
$ (وثيقة). ready (function () {
$ ("#logoimg"). التغيير (الوظيفة (e) {
readfiles (e)
}) ؛
}) ؛