تشترك هذه المقالة في أمثلة على تحميل ومعاينة JS HTML5 متعددة الصور ومعاينتها للرجوع إليها. المحتوى المحدد كما يلي
التطبيق الرئيسي
1. يمكن لملفات HTML5 تحديد ملفات متعددة والحصول على معلومات ملفات متعددة
2. كائن xmlhttprequest ، أرسل طلب نقل HTTP
3. ضع كل ملف في FormData للإرسال
4. استخدم ReadAsdataurl لتحويل محتوى الصورة مباشرة إلى عنوان URL ، ووضعه في SRC الخاص بعلامة IMG ، وإنشاء صور قابلة للمعاينة.
HTML+CSS+JS رمز
<! doctype html> <head> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <title> اختبار html fileReader </title> <style <style type = "text/css"> html ، body ، header ، footer ، div ، ul ، li ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، label ، input ، textarea ، p ، span ، a {padding: 0 ؛ الهامش: 0 ؛} img {border: 0 ؛} em ، Strong {font-weight: normal ؛ font-style: normal ؛} ul {list-style: none ؛} h1 ، h2 ، h3 ، h4 ، h5 ، h6 {font-weight: normal ؛ الحجم font: 100 ٪ ؛} a ، a: بعد {text-decoration: none ؛}. photo_wrap {clear: clo ؛}. phot_wrap li {margin: 10px ؛ العرض: 150 بكسل ؛ تعويم: اليسار ؛}. photo_box {الارتفاع: 150px ؛ العرض: 150 بكسل ؛ الفائض: مخفي. الموضع: النسبية ؛}. Photo_box .Img1 {الارتفاع: 150px ؛}. Photo_box .Img2 {Width: 150px ؛}. Upload_result {Hight: 50px ؛}. الارتفاع: 40 بكسل ؛ العرض: 100px ؛ تعويم: اليسار ؛}. btn {الارتفاع: 40px ؛ رفع الخط: 40 بكسل ؛ اللون: #fff ؛ العرض: كتلة ؛ الحدود الحدودية: 3px ؛ محاذاة النص: المركز ؛ لون الخلفية: #ff5581 ؛ / * المتصفحات القديمة */ الخلفية-صورة: -Moz-Liner-Radient (Top ، #Fa7B9C 0 ٪ ، #FF5581 100 ٪) ؛ ] / * chrome ، safari4+ */ background-image: -webkit-linar-radient (top ، #fa7b9c 0 ٪ ، #ff5581 100 ٪) ؛ / * chrome10+ ، safari5.1+ */ background-image: -o-linar-radient (top ، #fa7b9c 0 ٪ ، #ff5581 100 ٪) ؛ / * Opera 11.10+ */ background-image: -MS-Linar-Radient (Top ، #fa7b9c 0 ٪ ، #ff5581 100 ٪) ؛ / * ie10+ */ background-emage: Linear-Radient (إلى أسفل ، #fa7b9c 0 ٪ ، #ff5581 100 ٪) ؛ / * w3c */ filter: progid: dimizageTransform.microsoft.gradient (startColorStr = '#fa7b9c' ، endcolorstr = '#ff5581' ، gradientType = 0) ؛ / * ie6-8 */ box-shadow: 0 1px 0 rgba (255 ، 255 ، 255 ، 0.3) أقحم ، 0 1px 2px rgba (0 ، 0 ، 0 ، 0.3) ؛}. الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛}. btn_upload {width: 100px ؛ الهامش: 0 10px 10px ؛ تعويم: اليسار ؛}. / * المتصفحات القديمة */ الخلفية-صورة: -Moz-Liner-Radient (Top ، #FB99B1 0 ٪ ، #FF5581 100 ٪) ؛ / * ff3.6+ */ background-image: -webkit-radient (خطي ، أعلى اليسار ، أسفل اليسار ، أوقف اللون (0 ٪ ،#fb99b1) ، توقف اللون (100 ٪ ، ## ff5581)) ؛ / * Chrome ، Safari4+ */ background-image: -webkit-linar-radient (top ، #fb99b1 0 ٪ ، #ff5581 100 ٪) ؛ / * chrome10+ ، safari5.1+ */ background-image: -o-linar-radient (top ، #fb99b1 0 ٪ ، #ff5581 100 ٪) ؛ / * Opera 11.10+ */ background-image: -MS-Linar-Radient (Top ، #fb99b1 0 ٪ ، #ff5581 100 ٪) ؛ / * ie10+ */ background-emage: linear-tergient (إلى أسفل ، #fb99b1 0 ٪ ، #ff5581 100 ٪) ؛ / * w3c */ filter: progid: dimizageTransform.microsoft.gradient (startColorStr = '#fb99b1' ، endcolorstr = '#ff5581' ، gradientType = 0) ؛ / * ie6-8 */}. file_input_wrap {الموضع: absomute ؛ أعلى: 0 ؛ اليسار: 0 ؛ العرض: 100px ؛ الارتفاع: 40px ؛}. file_input_wrap label {width: 100 ٪ ؛ الارتفاع: 100 ٪ العرض: كتلة ؛ العتامة: 0 ؛ المؤشر: مؤشر ؛}. file_input_wrap input {opacity: 0 ؛ Filter: alpha (عتامة = 0) ؛/*ie8 وتحت*/ الموضع: مطلق ؛ أعلى: 7px ؛ اليمين: 173 بكسل ؛ المؤشر: مؤشر. العرض: 95px ؛}. photo_box .icon_pos {الارتفاع: 20px ؛ العرض: 20 بكسل ؛ العرض: كتلة ؛ الموقف: مطلق ؛ اليمين: 0 ؛ أسفل: 0 ؛}. photo_box .Loading {الارتفاع: 10px ؛ العرض: كتلة ؛ الموقف: مطلق ؛ اليسار: 0 ؛ أسفل: 0 ؛ صورة الخلفية: url (loading.gif) ؛}. sucess_icon {background-image: url (icons_01.png) ؛ خلفية الفوضع: 0 0 ؛}. error_icon {background-image: url (icons_01.png) ؛ الخلفية-الموضع: -20px 0 ؛} </style> </head> <body> <viv> <a id = "j_add_pic" href = "javaScript: ؛"> إضافة صورة </a> <viv> <type type = "file" id = "file ' </viv> </viv> <a id = "j_upload" href = "javaScript: ؛"> بدء التحميل </a> <div id = "j_photo_wrap"> <ul> </ul> </viv> </body> <script type = "text/javaScript" src = "jquery-. type = "text/javaScript"> var img_index = new array () ؛ دالة upload_img () {var j = 0 ؛ IMG () ؛ وظيفة IMG () {// 1. إنشاء كائن xmlhttprequest if (img_index.length> 0) {var singleimg = img_index [j] ؛ var xmlhttp ؛ if (window.xmlhttprequest) {// ie7+، firefox ، chrome ، opera ، safari xmlhttp = new xmlhttprequest ؛ // إصلاح إذا كان لبعض الإصدارات المحددة من حشرات متصفح mozillar (xmlhttp.overridemiMetype) {xmlhttp.overridemiMetype ('text/xml') ؛ } ؛ } if if (window.activexobject) {// ie6 ، ie5 xmlHttp = new ActivexObject ("Microsoft.xmlhttp") ؛ } ؛ if (xmlhttp.upload) {// progress bar xmlhttp.upload.addeventListener ("progress" ، function (e) {if ( li '). eq (j) .find ('. loading '). // 2. وظيفة رد الاتصال // onReadyStateChange هي وظيفة مقبض الحدث تسمى في كل مرة يغير خاصية ReadyState XMLHTTP.OnReadyStateChange = function (e) {if (xmlHttp.ReadyState == 4) {if ( if (json.status == 1) {$ ('#j_photo_wrap ul li'). $ ('#j_photo_wrap ul li'). eq (j) .find ('. loading'). Hide () ؛ $ ('#j_photo_wrap ul li'). eq (j) .find ('. icon_pos'). addClass ('sucess_icon') ؛ } آخر {$ ('#j_photo_wrap ul li'). $ ('#j_photo_wrap ul li'). eq (j) .find ('. loading'). Hide () ؛ $ ('#j_photo_wrap ul li'). eq (j) .find ('. icon_pos'). addClass ('error_icon') ؛ }} آخر {$ ('#j_photo_wrap ul li'). $ ('#j_photo_wrap ul li'). eq (j) .find ('. loading'). Hide () ؛ $ ('#j_photo_wrap ul li'). eq (j) .find ('. loading'). Hide () ؛ $ ('#j_photo_wrap ul li'). eq (j) .find ('. icon_pos'). addClass ('error_icon') ؛ } if (j <img_index.length - 1) {j ++ ؛ IMG () ؛ }}}} ؛ // 3. تعيين معلومات الاتصال // تهيئة معلمات طلب HTTP ، ولكن لا ترسل الطلبات. . // 4. إرسال البيانات ، وابدأ التفاعل مع Server // إرسال طلبات HTTP ، واستخدم المعلمات التي تم تمريرها إلى طريقة Open () ، والطلب الاختياري الذي تم تمريره إلى الطريقة. إذا كان ذلك صحيحًا ، فسيتم تنفيذ الإرسال على الفور // إذا كان خطأ (متزامن) ، فسيتم تنفيذ SEND فقط بعد أن تعود بيانات الخادم / /الحصول على الطريقة لا تتطلب محتوى في إرسال var formdata = new formData () ؛ formdata.append ("filedata" ، singleimg) ؛ xmlhttp.send (formData) ؛ } //}}}} ؛ $ ('#j_upload'). انقر فوق (function () {upload_img () ؛}) ؛ $ ('#j_add_area'). hover (function () {$ ('#j_add_pic'). addClass ('btn_cur') ؛} ، function () {$ ('#j_add_pic'). removeclass ('btn_cur') ؛}) ؛ $ ('#j_add_area'). انقر فوق (function () {$ ('#file'). click () ؛}) ؛ وظيفة تغيير حجم (img) {if (img.offSetheight> img.offsetWidth) {$ (img) .removeclass ('img1'). addClass ('img2') ؛ } else {$ (img) .RemoVeClass ('img2'). addClass ('img1') ؛ }} fileInfo (source) {var ireg = /image//.*/i ؛ ملفات var = source.files ؛ اسم var ، الحجم ، الكتابة ؛ لـ (var i = 0 ، f ؛ f = files [i] ؛ i ++) {name = f.name ؛ الحجم = F.Size ؛ اكتب = f.type ؛ if (! type.match (ireg)) {$ ('#j_photo_wrap ul'). إلحاق ('<li> <liv>'+name+'ليست صورة <span> </span> <span> </span> </viv> <viv> <viv> </viv> </li>) ؛ } آخر {img_index.push (f) ؛ if (size> 1048576) {$ ('#j_photo_wrap ul'). إلحاق ('<li> <iv>'+name+'هو كبير جدًا لإنشاء معاينة <span> </span> <span> </span> </viv> <viv> </liv> </li>) ؛ } آخر {if (window.filereader) {var fr = new fileReader () ؛ fr.Onload = (function (f) {return function (e) {$ ('#j_photo_wrap ul'). إلحاق ('<li> <iv> <img onload = "resize (this) ؛ Fr.Readasdataurl (F) ؛ }}}}}}} ؛ </script> </html>استلمت PHP رمز الملف (هنا فقط يحصل على اسم الملف ونوعه وحجمه ، ولا يتم تنفيذ أي عمليات أخرى)
<؟ php $ name = $ _files ['filedata'] ['name'] ؛ $ type = $ _files ['filedata'] ['type'] ؛ $ size = $ _files ['filedata'] ['size'] ؛ $ return = array ("name" => $ name ، "type" => $ type ، "size" => $ size ، "status" => 1) ؛ $ return = json_encode ($ return) ؛ صدى $ return ؛؟>المشاكل الحالية
1. من أجل إنشاء الصور المصغرة ، ستأخذ ReadAsdataurl الذاكرة عند قراءة محتوى الملف ، لذلك سوف تتسبب الصور الكبيرة في تعطل المتصفح أو تعطلها.
2. لا تتم معالجة التحميل في تجزئة
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.