تحميل ملفات مع أياكس

() translation by (you can also view the original English article)

لا يمكنني الوصول إلى نهاية الأشياء المرحة التي يمكنك فعلها باستخدام تقنيات الويب الناشئة. اليوم ، سوف أريكم كيفية القيام بشيء ما - إلى حين آخر - لم يسبق له مثيل تقريباً: تحميل الملفات عبر AJAX.

وه ، بالتأكيد ، هناك تم اختراق ؛ ولكن إذا كنت مثلي ، وتشعر بالسوخ في كل مرة تكتب فيها iframe ، فستعجبك كثيرًا. الانضمام لي بعد القفزة!

هل تبحث عن حل سريع؟

إذا كنت تبحث عن حل سريع، هناك مجموعة كبيرة من البرامج النصية لتحميل الملفات وتطبيقات أكثر في الأسواق Envato.

برنامج تحميل ملفات HTML5 هذا أنيق بشكل خاص - يمكنك إضافة الملفات بسهولة عن طريق السحب والإفلات أو النقر كافة الملفات التي سيتم تحميلها عن طريق AJAX أو يمكن إضافتها ضمن نموذج، ويمكن إعادة تسمية الملفات قبل تحميلها. حل كبيرة وسريعة إذا كان هذا ما كنت تبحث عن!

لماذا لا يمكننا الحصول على الأخبار السيئة أكثر مع؟

هذا لا يعمل في كل متصفح. ومع ذلك ، مع بعض التحسينات التدريجية (أو أيا كانت الكلمة الطنانة الحالية) ، فستكون لدينا صفحة تحميل ستعود إلى الإصدار IE6 (على الرغم من عدم وجود بتات AJAXy).

سيعمل تحميل AJAX الخاص بنا طالما أن FormData متاح ؛ خلاف ذلك ، سيحصل المستخدم على تحميل عادي.

هناك ثلاثة مكونات رئيسية لمشروعنا.

السمة multiple على عنصرinputالملف.
كائن FileReader من ملف API الجديد.
الكائن FormData من XMLHttpRequest2.

نستخدم السمة multiple للسماح للمستخدم بتحديد عدة ملفات للتحميل (سيعمل التحميل المتعدد للملفات بشكل طبيعي حتى إذا لم يكن FormData متاحًا). كما سترى ، FileReader يسمح لنا بإظهار الصور المصغرة للمستخدم من الملفات التي يتم تحميلها (سنكون نتوقع الصور).

لا تعمل أي من ميزاتنا الثلاثة في IE9 ، لذلك سيحصل جميع مستخدمي IE على تجربة تحميل عادية (على الرغم من أنني أفهم أن دعم `FileReader` متوفر في IE10 Dev Preview 2). لا يعمل FileReader في أحدث إصدار من Safari (5.1) ، لذا لن يحصلوا على الصور المصغرة ، لكنهم سيحصلون على تحميل AJAX ورسالة التأكيد. أخيرًا ، يحتوي Opera 10.50 على دعم FileReader ولكن ليس دعم FormData ، لذلك سيحصلون على صور مصغرة ، ولكن تحميلات عادية.

مع أن الخروج من الطريق، دعونا الحصول على الترميز!

الخطوة 1: توصيف والتصميم

دعونا نبدأ مع بعض العلامات الأساسية والتصميم. بالطبع، ليس هذا هو الجزء الرئيسي من هذا البرنامج التعليمي، لن يعاملك مثل مبتدئ.

ال HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML5 File API</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="main">
    <h1>Upload Your Images</h1>
    <form method="post" enctype="multipart/form-data"  action="upload.php">
      <input type="file" name="images" id="images" multiple />
      <button type="submit" id="btn">Upload Files!</button>
    </form>

    <div id="response"></div>
    <ul id="image-list">

    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

جميلة جدا ، ايه؟ لقد حصلنا على نموذج نشر على upload.php ، والذي سننظر إليه في عنصر ثانٍ ، وعنصر إدخال فردي ، من file الكتابة. لاحظ أنه يحتوي على السمة المنطقية multiple ، والتي تسمح للمستخدم بتحديد ملفات متعددة في وقت واحد.

هذا كل شيء حقاً أن نرى هنا وهناك. دعنا ننتقل.

CSS

body {
  font: 14px/1.5 helvetica-neue, helvetica, arial, san-serif;
  padding:10px;
}

h1 {
  margin-top:0;
}

#main {
  width: 300px;
  margin:auto;
  background: #ececec;
  padding: 20px;
  border: 1px solid #ccc;
}

#image-list {
  list-style:none;
  margin:0;
  padding:0;
}
#image-list li {
  background: #fff;
  border: 1px solid #ccc;
  text-align:center;
  padding:20px;
  margin-bottom:19px;
}
#image-list li img {
  width: 258px;
  vertical-align: middle;
  border:1px solid #474747;
}

على الإطلاق لا صدمة هنا.

الخطوة 2: بي إتش بي

يجب أن نكون قادرين على التعامل مع عمليات تحميل الملفات في النهاية الخلفية أيضًا ، لذلك دعنا نغطي ذلك بعد ذلك.

upload.php

<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
  if ($error == UPLOAD_ERR_OK) {
    $name = $_FILES["images"]["name"][$key];
    move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
  }
}

echo "<h2>Successfully Uploaded Images</h2>";

ضع في اعتبارك أن هذه هي الخطوط الأولى من PHP التي كتبتها في سنة واحدة بسهولة (أنا شخص روبي). ربما ينبغي عليك أن تفعل المزيد للأمن ؛ ومع ذلك ، فنحن ببساطة نتأكد من عدم وجود أخطاء في التحميل. إذا كانت هذه هي الحالة ، فنحن نستخدم الملف move_uploaded_file المضمن لنقله إلىuploadsالتحميلات. لا تنس أن تتأكد من أن المجلد قابل للكتابة.

لذا، الآن، ينبغي أن يكون لدينا عمل تحميل النموذج. يمكنك اختيار صورة (متعددة، إذا تريد وتمكنك من المستعرض الخاص بك)، انقر فوق الزر "تحميل الملفات"!، وكنت احصل على الرسالة "بنجاح حملت الصور."

هنا ما يبدو لنا مشروع صغير مثل حتى الآن:

لكن ، هيا ، إنه عام 2011: نريد أكثر من ذلك. ستلاحظ أننا ربطنا jQuery وملف upload.js. دعونا نكسر ذلك الان

الخطوة 3: جافا سكريبت

دعونا لا نضيع الوقت: ونحن هنا الذهاب!

(function () {
  var input = document.getElementById("images"),
      formdata = false;
    
  if (window.FormData) {
    formdata = new FormData();
    document.getElementById("btn").style.display = "none";
  }
  

}();

إليك ما نبدأ به. نخلق متغيرين: input هي عنصر إدخال الملفات ؛ سيتم استخدام formdata لإرسال الصور إلى الخادم إذا كان المستعرض يدعم ذلك. نقوم بتهيئته إلى false ومن ثم التحقق لمعرفة ما إذا كان المستعرض يدعم FormData؛ إذا حدث ذلك ، فسننشئ كائن FormData جديدًا. أيضا، إذا كان يمكننا تقديم الصور مع أياكس، لا نحتاج الزر "تحميل الصور!"، حيث يمكن أن نخفي ذلك. لماذا لا نحن في حاجة إليها؟ حسنا، نحن ذاهبون للسيارات سحرية تحميل الصور مباشرة بعد أن يقوم المستخدم بتحديد لهم.

سوف يذهب بقية جافا سكريبت داخل الدالة الخاصة بك استدعاء ذاتي مجهول. ونحن بعد ذلك بإنشاء وظيفة مساعد قليلاً سوف تظهر الصور بمجرد المستعرض لها:

function showUploadedItem (source) {
  var list = document.getElementById("image-list"),
      li   = document.createElement("li"),
      img  = document.createElement("img");
    img.src = source;
    li.appendChild(img);
  list.appendChild(li);
}

تأخذ الدالة معلمة واحدة: مصدر الصورة (سنرى كيف سنحصل عليها قريباً). ثم ، ببساطة نجد القائمة في الترميز الخاص بنا وإنشاء عنصر قائمة وصورة. ونحن تعيين مصدر الصورة إلى مصدر تلقينا، وضع الصورة في عنصر القائمة، ووضع عنصر القائمة في القائمة. فويلا!

بعد ذلك ، يتعين علينا بالفعل التقاط الصور وعرضها وتحميلها. وكما قلنا ، سنفعل ذلك عند تشغيل حدث onchange على عنصر الإدخال.

if (input.addEventListener) {
  input.addEventListener("change", function (evt) {
    var i = 0, len = this.files.length, img, reader, file;
    
    document.getElementById("response").innerHTML = "Uploading . . ."
    
    for ( ; i < len; i++ ) {
      file = this.files[i];
  
      if (!!file.type.match(/image.*/)) {

      } 
    }
      
  }, false);
}

نحن لا داعي للقلق حول نموذج الحدث الملكية لشركة أي أي، نظراً لأن IE9 + يعتمد الدالة القياسية أديفينتليستينير.

هناك المزيد ، لكن لنبدأ بهذا. أولاً ، لا داعي للقلق بشأن نموذج الحدث المملوك لشركة IE ، نظرًا لأن IE9 + يدعم وظيفة addEventListener القياسية (ولا يدعم IE9 أو أحدث ميزاتنا الجديدة).

لذا، ما نريد القيام به عند قيام المستخدم باختيار الملفات؟ أولاً، نحن إنشاء متغيرات قليلة. حق واحد فقط المهم الآن هو len = this.files.length. الملفات التي قام المستخدم بتحديده سيكون موجوداً من this.files الكائن. الحق الآن، نحن قلقون من إلا مع خاصية length، حيث أننا يمكن أن يتكرر أكثر من الملفات...

... وهو بالضبط ما نفعله بعد. داخل لدينا حلقة، وضعنا الحالي fileإلى ملف لسهولة الوصول إليها. القادم شيء نفعله هو التأكد من أن الملف صورة. يمكننا القيام بذلك عن طريق مقارنة خاصية typeمع التعبير العادي. نحن نبحث عن نوع يبدأ بـ "image" ويتبعه أي شيء. (إن الدوي المزدوج في الأمام يحول النتيجة إلى قيمة منطقية.)

لذا، ماذا نفعل إذا كانت لدينا صورة في أيدينا؟

if ( window.FileReader ) {
  reader = new FileReader();
  reader.onloadend = function (e) { 
    showUploadedItem(e.target.result);
  };
  reader.readAsDataURL(file);
}
if (formdata) {
  formdata.append("images[]", file);
}

نتحقق مما إذا كان المستعرض يدعم إنشاء كائنات FileReader أم لا. إذا حدث ذلك ، فسننشئ واحدًا.

إليك كيفية استخدام كائن FileReader: سننقل كائن الملف إلى طريقة reader.readAsDataURL. يؤدي ذلك إلى إنشاء عنوان url للبيانات للصورة التي تم تحميلها. أنها لا تعمل بالطريقة التي قد تتوقع، على الرغم. ليس تمرير url البيانات مرة أخرى من الدالة. بدلاً من ذلك، سوف يكون url البيانات جزء من كائن الحدث.

مع وضع ذلك في الاعتبار ، سنحتاج إلى تسجيل وظيفة على حدث reader.onloadend. تأخذ هذه الوظيفة كائن حدث ، نحصل على عنوان url البيانات: في e.target.result (نعم ، e.target هو كائن reader ، ولكن كان لدي مشاكل عند استخدام reader بدلا من e.target داخل هذه الوظيفة) . سنقوم فقط بتمرير عنوان URL الخاص بالبيانات إلى وظيفة showUploadedItem الخاصة بنا (التي كتبناها أعلاه).

بعد ذلك ، نتحقق من وجود كائن formdata. تذكر ، إذا كان المستعرض يدعم FormData ، سيكون formdata كائن FormData؛ خلاف ذلك ، سيكونfalse. لذلك ، إذا كان لدينا كائن FormData ، فسنستدعي طريقة append. الغرض من كائن FormData هو الاحتفاظ بالقيم التي ترسلها عبر نموذج ؛ لذلك ، فإن أسلوب append ببساطة يأخذ مفتاح وقيمة وفي حالتنا، لدينا المفتاح صور []؛ بإضافة الأقواس-تحقيقا للغاية، علينا أن نتأكد من كل الوقت ونحن إلحاق قيمة أخرى، نحن كنت إلحاق فعلا لأن الصفيف، بدلاً من الكتابة فوق الخاصية الصورة.

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

if (formdata) {
  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res) {
      document.getElementById("response").innerHTML = res; 
    }
  });
}

مرة أخرى ، يجب أن نتأكد من أن لدينا دعم FormData ؛ إذا لم نفعل ذلك ، فسيكون زر "تحميل الملفات" مرئيًا ، وهذا هو الكيفية التي سيحمّل بها المستخدم الصور. ومع ذلك، إذا كان لدينا دعم فورمداتا، نحن تأخذ الرعاية من تحميلها عبر AJAX. نحن نستخدم مسج للتعامل مع جميع الشذوذ أياكس عبر المتصفحات.

ربما تكون على دراية بطريقة jajuery’s $ .ajax: يمكنك تمريرها إلى كائن خيارات. يجب أن يكون عنوان URL ونوع وخصائص النجاح واضحًا. خاصية البيانات هي كائن شكل البيانات الخاص بنا. لاحظ هذه الخصائص processData ونوع المحتوى. ووفقا لوثائق مسج، processData صحيح بشكل افتراضي، وسوف عملية وتحويل البيانات إلى سلسلة استعلام. لا نريد القيام بذلك ، لذا قمنا بتعيين ذلك على "false". نحن أيضًا بصدد تعيين contentType على false للتأكد من وصول البيانات إلى الخادم كما نتوقعه.

وهذا كل شيء. الآن، عندما يحمل المستخدم الصفحة، يرون هذا:

وبعد تحديد الصور ، سيظهر لهم هذا:

وتم تحميل الصور:

وهذا هو التفاف!

يعد تحميل الملفات عبر AJAX أمرًا رائعًا ، ومن الرائع أن تدعم هذه التقنيات الجديدة ذلك دون الحاجة إلى اختراق طويل. إذا كنت قد تلقيت أي أسئلة حول ما فعلناه هنا ، فانتقل إلى هذه التعليقات! شكرا جزيلا لقراءتك!

وإذا كانت لا تزال تحتاج إلى مساعدة مع هذه المشكلة أو أي مسألة أخرى الترميز، تجد الدعم في الاستوديو Envato.