سواء أكان ذلك PHP أو البرامج النصية الأخرى من جانب الخادم ، فإنها توفر وظيفة تحميل الملفات ، وهي بسيطة نسبيًا للتنفيذ. باستخدام JavaScript للتعاون ، يمكن تحقيق تحميل ملف Ajax. على الرغم من أن JQuery نفسها لا توفر مثل هذه الوظائف المبسطة ، إلا أن هناك العديد من المكونات الإضافية التي يمكن تنفيذها. من بينها ، Ajaxfileupload.js المقدمة من PhpleTter.com هو مكون إضافي خفيف الوزن ، وطريقة الكتابة تشبه إلى حد كبير الطريقة العالمية $ .post () التي توفرها jQuery ، وهي بسيطة وسهلة الاستخدام.
ومع ذلك ، فإن هذا المكون الإضافي مبسط للغاية. بالإضافة إلى توفير المسار لتحميل الملفات ، لا يمكن نقل قيم إضافية إلى خادم الخلفية. لذلك ، قمت بتعديل البرنامج النصي وأضفت معلمة كائن بيانات.
1. مبدأ
أنا أستخدم PHP كنصي من جانب الخادم هنا. يذكر كل كتاب تقريبًا مع PHP أقل كيفية استخدام طريقة move_uploaded_file () لتحميل الملفات ، ولن أخوض في التفاصيل هنا. ما أريد أن أقوله هو استخدام مبدأ تحميل AJAX.
لأنني كنت أستخدم مكتبة jQuery ، عندما أفكر في Ajax ، فإن رد فعلي الأول هو تجربة طريقة $ .post () ، واستخدم كل محدد للحصول على قيمة القيمة في مربع الملف ، ثم إرسالها إلى خادم الخلفية. بالطبع ، اتضح أن هذا لم يكن ممكنًا. (بسبب هذه المشكلة ، راجعت أيضًا الكثير من المعلومات وقدمت العديد من البرامج النصية مثل ASP على الإنترنت. لا أعرف حقًا ماذا أقول.)
بالعودة إلى الموضوع ، ليس من الصعب في الواقع تحميل Ajax ، وهناك العديد من الطرق. المكوّن الإضافي AjaxfileUpload.js لـ phpletter.com المذكورة في هذه المقالة هو طريقة استخدام iframes. هذه أيضًا طريقة شائعة عند التحميل دون تحديث الصفحة دون استخدام البرامج النصية JavaScript. (يتم استخدام هذه الطريقة لكتابة سجلات في خلفية BO-BLOG لهذه المدونة)
المكون الإضافي AjaxfileUpload.js هو أيضًا بسيط للغاية. يستخدم أولاً محدد jQuery للحصول على قيمة مسار الملف في مربع تحميل الملف ، ثم قم بإنشاء iframe ديناميكيًا ، وإنشاء مربع ملف جديد في الداخل ، مما يوفر طريقة نشر لإرسالها إلى الخلفية. أخيرًا ، عد إلى النتائج إلى مكتب الاستقبال.
2. الاستخدام
استخدام المكون الإضافي AjaxfileUpload.js بسيط للغاية.
رمز HTML مكتب الاستقبال مشابه:
<script type = "text/javaScript"> $ (#buttonuplod) .click (function () {$ .ajaxFileUpload ({url: 'doajaxfilepload.php' ، "JSON" ، // إرجاع نوع البيانات: Text ، XML ، JSON ، HTML ، SCRITP ، JSONP FIVE SUCSITES: FUNCTION (DATA) {alert (data.file_infor) ؛ ajaxfileupload () ؛ "> تحميل </button>خلفية doajaxfileupload.php النص:
<؟ php $ upfilepath = "../attachment/" ؛ $ ؛move_uploaded_file ($_files budap'img'/201'tmp_name' ' if ($ ok === false) {echo json_encode ('file_infor' => 'expload failed') ؛ } آخر {echo json_encode ('file_infor' => 'تم تحميله بنجاح') ؛ }؟>للاختبار ، يمكنك حفظ القيمة المتغيرة التي تم تمريرها بطريقة مماثلة لما يلي:
$ file_info = var_export ($ _ files ، true) ؛
$ ok = file_put_contents ("../ attachment/file_info.txt" ، $ file_info) ؛
إذا ($ ok) exit (json_encode ('file_infor' => 'تم تحميله بنجاح')) ؛
EXIT (JSON_ENCODE ('file_infor' => 'expload failed')) ؛
※ يلاحظ
يرجى ملاحظة العلامات في مربع ملف رمز HTML:
1. id = 'img' يستخدم لتحديد fileElementId: 'img' من المكون الإضافي ajaxfileupload.js. سيستخدم محدد jQuery هذه السلسلة للحصول على قيمة مربع النص ؛
2. name = 'img' يستخدم لقراءة بيانات الملف التي تم تحميلها من خلال $ _files ['img'] عند إرسالها إلى برنامج نصي خلفية من خلال post. إذا لم تكن هذه القيمة متوفرة ، فإن متغير $ _files فارغ ؛
لذلك ، لا غنى عن هاتين القيمتين ولا يمكن الخلط بينهما.
3. دعم معلمات إضافية
في بعض الأحيان ، نحتاج إلى التعامل مع الملفات التي تم تحميلها بناءً على متغيرات معينة في الخلفية. على سبيل المثال ، قم بتحديث الملف. في هذا الوقت ، تحتاج إلى تمرير بعض المعلمات الإضافية إلى نفس المرحلة. لذلك ، قمت بتعديل البرنامج المساعد AjaxfileUpload.js:
AddotherRequestStoStoform: function (form ، data) {// إضافة معلمة إضافية var originalelement = $ ('<input type = "hidden" name = "" value = "">') ؛ لـ (مفتاح var في البيانات) {name = key ؛ القيمة = البيانات [المفتاح] ؛ var cloneElement = OriginalElement.clone () ؛ cloneElement.attr ({'name': name ، 'value': value}) ؛ $ (cloneElement) .appendto (form) ؛ } نموذج الإرجاع ؛} ، ajaxfileupload: الوظيفة (s) {// todo تقديم الإعدادات العالمية ، مما يسمح للعميل بتعديلها لجميع الطلبات ، وليس فقط timeout s = jquery.extend ({} ، jquery.ajaxsettings ، s) ؛ var id = new date (). getTime () var form = jQuery.CreateUploAdform (id ، s.fileElementId) ؛ if (s.data) form = jQuery.AddotherRequestStoform (form ، s.data) ؛ var io = jquery.createuploadiframe (id ، s.secureuri) ؛الجزء الأحمر هو ما أضفته. وبهذه الطريقة يمكنني تمرير معلمات إضافية في قسم HTML المقدمة من خلال رمز كما هو أدناه:
عنوان URL: 'doajaxfileupload.php' ، // الخادم الذي تتعامل فيه
Secureuri: false ، // قيمة المعرف المقابلة للملف في رمز معالجة الصفحة
البيانات: {'test': 'test' ، 'ok': 'ok'} ، // تم تمريرها في كائن ، ويمكن لجزء المحتوى إدخال القيمة المتغيرة لـ javaScript
FileElementId: 'img' ،
البرنامج النصي لمعالجة الخلفية هو:
array_push ($ _ files ، $ _ request) ؛ $ file_info = var_export ($ _ files ، true) ؛ $ ok = file_put_contents ("../ attachment/file_info.txt" ، $ file_info) ؛ if ($ ok) exit (json_encode ('' file_infor '=>' ' EXIT (JSON_ENCODE ('file_infor' => 'expload failed')) ؛يمكن ملاحظة أن المبدأ بسيط للغاية ، وهو إضافة محتوى كائن البيانات الإضافي إلى النموذج أسفل IFRAME ، ونقله إلى البرنامج النصي PHP الخلفية ، والحصول على هذه القيم مع متغيرات مثل $ _request.
محتوى file_info.txt المحتفظ به في إخراج الخلفية كما يلي:
صفيف (
'file' =>
صفيف (
'name' => 'Firefox-java.txt' ،
'type' => 'text/plain' ،
'tmp_name' => 'd: //tools//xampp//tmp//phed45.tmp' ،
'خطأ' => 0 ،
"الحجم" => 250 ،
) ،
0 =>
صفيف (
"اختبار" => "اختبار" ،
"موافق" => "موافق" ،
'phpsessid' => 'e379fd4fb2abca6e802a1302805a5535' ،
) ،
)
ajaxfileupload.js:
jQuery.Extend ({createUploadiframe: function (id ، uri) {// create framevar frameid = 'JuploadFrame' + id ؛ if (window.activexObject) {var io = document.createElement ('<iframe id = "' + frameid + '" 'boolean') {io.src = 'javaScript: false' ؛} آخر إذا (typeof uri == 'string') {io.src = uri ؛}} else {var io = document.createElement ('iframe') ؛ io "absort" ؛ io.style.top = '-1000px' ؛ $ (<form action = "method =" post "name =" + formid + '"id =' 'formid +'" enctype = "multipart/form-data"> </form> ') $ (OldElement). $ (form) .css ('top' ، '-1200px') ؛ $ (form) .css ('Left' ، '-1200px') ؛ $ (form) .appendto ('body') ؛ نموذج العودة } ، addotherRequestStoform: function (form ، data) {// إضافة معلمة إضافية var originalelement = $ ('<إدخال type = "hidden" name = "" value = "">') ؛ لـ (مفتاح var في البيانات) {name = key ؛ القيمة = البيانات [المفتاح] ؛ var cloneElement = OriginalElement.clone () ؛ cloneElement.attr ({'name': name ، 'value': value}) ؛ $ (cloneElement) .appendto (form) ؛ } نموذج الإرجاع ؛ } ، ajaxfileupload: الوظيفة (s) {// todo تقديم الإعدادات العالمية ، مما يسمح للعميل بتعديلها لجميع الطلبات ، وليس فقط timeout s = jquery.extend ({} ، jquery.ajaxsettings ، s) ؛ var id = new date (). getTime () var form = jQuery.CreateUploAdform (id ، s.fileElementId) ؛ if (s.data) form = jQuery.AddotherRequestStoform (form ، s.data) ؛ var io = jquery.createuploadiframe (id ، s.secureuri) ؛ var frameid = 'JuploadFrame' + id ؛ var formid = 'JuploAdform' + id ؛ // شاهد مجموعة جديدة من الطلبات إذا (S.Global &&! jQuery.active ++) {jQuery.event.trigger ("ajaxstart") ؛ } var requestDone = false ؛ // إنشاء كائن الطلب var xml = {} if (s.global) jQuery.event.trigger ("ajaxsend" ، [xml ، s]) ؛ // انتظر استجابة للعودة var exploadCallback = function (isTimeOut) {var io = document.getElementById (frameId) ؛ حاول {if (io.contentwindow) {xml.responsetext = io.contentwindow.document.body؟ xml.responsexml = io.contentwindow.document.xmldocument؟ io.contentwindow.document.xmldocument: io.contentwindow.document ؛ } آخر إذا (io.contentDocument) {xml.responsetext = io.contentDocument.document.body؟ io.contentDocument.document.body.innerhtml: null ؛ xml.responsexml = io.contentdocument.document.xmldocument؟ io.contentdocument.document.xmldocument: io.contentdocument.document ؛ }} catch (e) {jquery.handleerror (s ، xml ، null ، e) ؛ } if (xml || isTimeOut == "timeout") {requestDone = true ؛ var status ؛ try {status = isTimeout! = "timeout"؟ "النجاح": "خطأ" ؛ // تأكد من أن الطلب كان ناجحًا أم غير مُعد (الحالة! = "خطأ") {// معالجة البيانات (تشغيل XML من خلال httpdata بغض النظر عن callback) var data = jquery.uploadhttpdata (xml ، s.datype) ؛ // إذا تم تحديد رد اتصال محلي ، فقم بإطلاقه ومرره Dataif (S.Success) S.Success (البيانات ، الحالة) ؛ "خطأ" ؛ jquery.handleerror (s ، xml ، الحالة ، e) ؛} // كان الطلب كاملًا (s.global) jQuery.event.trigger ("ajaxcomplete" ، [xml ، s]) ؛ . // نتيجة العملية (s.complete) s.c.plete (xml ، الحالة) ؛ jQuery (io) .Unbind () setTimeOut (function () {try {$ (io) .Remove () ؛ $ (form) .Remove () ؛} catch (e) {jQuery.Handleerror (s ، xml ، null ، e) ؛}} ، 100) {setTimeOut (function () {// تحقق لمعرفة ما إذا كان الطلب لا يزال يحدث (!! requestDone) UploadCallback ("timeout") ؛} ، S.Timeout) ؛ } حاول {// var io = $ ('#' + frameid) ؛ var form = $ ('#' + formid) ؛ $ (form) .attr ('action' ، s.url) ؛ $ (form) .attr ('method' ، 'post') ؛ $ (form) .attr ('target' ، frameid) ؛ if (form.encoding) {form.encoding = 'multipart/form-data' ؛ } آخر {form.enctype = 'multipart/form-data' ؛} $ (form) .submit () ؛ } catch (e) {jquery.handleerror (s ، xml ، null ، e) ؛ } if (window.attachevent) {document.getElementById (frameId) .atchevent ('Onload' ، UploadCallback) ؛ } آخر {document.getElementById (FrameId) .adDeventListener ('load' ، eploadCallback ، false) ؛ } return {Abort: function () {}} ؛ } ، eploadhttpdata: function (r ، type) {var data =! type ؛ Data = type == "XML" || بيانات ؟ R.Responsexml: R.Responsetext ؛ // إذا كان النوع هو "البرنامج النصي" ، فقم بتقييمه في السياق العالمي إذا (type == "script") jQuery.globaleval (data) ؛ // احصل على كائن JavaScript ، إذا تم استخدام JSON. if (type == "json") eval ("data =" + data) ؛ // تقييم البرامج النصية داخل html if (type == "html") jQuery ("<viv>"). html (data) .evalscripts () ؛ // ALERT ($ ('param' ، data) .each (function () {Alert ($ (this) .attr ('value')) ؛})) ؛ إرجاع البيانات ؛ }})