مدعوم ظيفة متعددة الأجزاء / شكل بيانات

Question

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

ويمكنني تقديم النموذج دون صفحة التحديث، وذلك باستخدام جافا سكريبت لتعيين السمة الهدف على شكل إلى iframe لMSIE أو كائن لموزيلا، ولكن هذا له مشكلتين. مشكلة بسيطة هي أن الهدف غير متوافق W3C (والذي هو السبب في أنني تعيينها في جافا سكريبت، وليس في XHTML). المشكلة الرئيسية هي أن الحدث onload لا إطلاق، على الأقل ليس على موزيلا على OS X ليوبارد. الى جانب ذلك، سيكون مدعوم جعل لرمز الاستجابة أجمل لأن البيانات التي تم إرجاعها يمكن أن يكون XML، لا تقتصر على XHTML كما هو الحال مع IFRAME.

وتقديم نتائج النموذج في HTTP التي تبدو مثل:

Content-Type: multipart/form-data;boundary=<boundary string>
Content-Length: <length>
--<boundary string>
Content-Disposition: form-data, name="<input element name>"

<input element value>
--<boundary string>
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>"
Content-Type: application/octet-stream

<element body>

وكيف يمكنني الحصول على طريقة الإرسال الكائن مدعوم لتكرار تيار HTTP أعلاه؟

Answer 1

ويمكنك بناء على طلب "متعدد الأجزاء / شكل بيانات 'نفسك (اقرأ المزيد حول هذا الموضوع في HTTP : //www.faqs.org/rfcs/rfc2388.html) ومن ثم استخدام أسلوب send) (أي xhr.send (الخاص بك متعدد الأجزاء على شكل بيانات). وبالمثل، ولكن أسهل، في فايرفوكس 4+ (أيضا في كروم وسفاري 5+ 5+) يمكنك استخدامها في FormData اجهة التي تساعد على بناء مثل هذه الطلبات. طريقة send هو جيد لمضمون النص ولكن إذا كنت ترغب في إرسال البيانات الثنائية مثل الصور، يمكنك أن تفعل ذلك مع مساعدة من طريقة sendAsBinary التي تم البدء حولها مع فايرفوكس 3.0. للحصول على تفاصيل حول كيفية إرسال الملفات عبر XMLHttpRequest، يرجى الرجوع إلى HTTP: //blog.igstan.ro/2009/01/pure-javascript-file-upload.html.

Answer 2

وليس هناك أي وسيلة للوصول حقل إدخال ملف داخل جافا سكريبت لذلك ليس هناك جافا سكريبت الحل الوحيد لتحميل الملف اياكس.

وهناك حل بديل مثل باستخدام iframe .

والخيار الآخر سيكون في استخدام شيء مثل SWFUpload أو <وأ href = "HTTP: // ajaxian.com/archives/youtube-uploader-now-using-gears-and-what-people-missed-in-gears-04 "يختلط =" نوفولو noreferrer "> جوجل التروس

Answer 3

وأنا لا أرى لماذا IFRAME (غير مرئي واحد) يعني XHTML وليس أي محتوى. إذا كنت تستخدم إطار iframe يمكنك تعيين OnReadyStateChange الحدث وانتظر 'الكامل'. التالي هل يمكن استخدام frame.window.document.innerHTML (يرجى تصحيح لي شخص ما) للحصول على نتيجة سلسلة.

var lFrame = document.getElementById('myframe');
lFrame.onreadystatechange = function()
{
   if (lFrame.readyState == 'complete')
   {
      // your frame is done, get the content...
   }
};

Answer 4

وسوف تحتاج إلى آخر إلى iframe إلى الحصول على هذا العمل، ببساطة إضافة السمة الهدف إلى النموذج الخاص بك، حيث يمكنك تحديد معرف IFRAME. شيء من هذا القبيل:

<form method="post" target="myiframe" action="handler.php">
...
</form>
<iframe id="myiframe" style="display:none" />

Answer 5

وأنا إرباك حول الحدث onload الذي قمت بتحديده، كان على الصفحة أو على الإطار من؟ الإجابة الأولى هي ثيريس الصحيحة أي وسيلة للقيام بذلك باستخدام مدعوم بحتة، إذا ما كنت تريد أن acheive هو مما اثار بعض الطريقة مرة واحدة الاستجابة موجودة على iframe أو ببساطة معرفة ما اذا كان يحتوي على محتوى بالفعل أم لا باستخدام DOM البرمجة، ثم إطلاق الأسلوب.

وإرفاق الحدث onLoad لإطار iframe

if(window.attachEvent){
 document.getElementById(iframe).attachEvent('onload', some_method);
}else{
 document.getElementById(iframe).addEventListener('load', some_method, false);
} 

Answer 6

<اقتباس فقرة>   

وترتيب المحتوى: بيانات النموذج، اسم

ويجب عليك استخدام منقوطة، مثل هذا: ترتيب المحتوى: استمارة البيانات. اسم

Answer 7

وهنا هو ما يصل الى طريق التاريخ باستخدام FormData ( كامل وثيقةMDN )

وسيناريو:

var form = document.querySelector('#myForm');
form.addEventListener("submit", function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.action);
    xhr.addEventListener("load", function(e) {
        // Your callback
    });

    xhr.send(new FormData(this));

    e.preventDefault();
});

و(من هذا الشكل الأساسي)

<form id="myForm" action="..." method="POST" enctype="multipart/form-data">
    <input type="file" name="file0">
    <input type="text" name="some-text">
    ...
</form>

وشكرا مرة أخرى لاليكس بولو للجوابه