Library provides transport to emulate AJAX via hidden iframe. In the first place necessary for AJAX uploading files to older browsers do not support the XMLHttpRequest 2.
Demo: https://paulzi.ru/misc/github/jquery-iframe-ajax/
Install via NPM
npm install jquery-iframe-ajax
Install via Bower
bower install jquery-iframe-ajax
Or install manually.
Include library on page after jQuery:
<script src="/bower_components/jquery/dist/jquery.min.js">
<script src="/bower_components/jquery-iframe-ajax/dist/jquery-iframe-ajax.min.js">
Now you can upload files via iframe transport:
$(document).on('click', function () {
$.ajax({
url: '/path/to/handler',
method: 'post',
iframe: true,
data: { additional: 'value' },
files: $('.form input[type="file"]')
})
.done(function (data) {
alert(data);
});
});
You can also send the existing form with all files and fields:
$(document).on('click', function () {
$.ajax({
url: '/path/to/handler',
method: 'post',
iframe: true,
data: { additional: 'value' },
form: $('.form')
})
.done(function (data) {
alert(data);
});
});
iframe
- enable iframe transportfiles
- array ofinput[type="file"]
or jQuery object with similar elements (using ifform
option is not set)form
- form or jQuery object with form (optionfiles
will be ignored)iframeOnSubmit
- callback after iframe form submit
By default, the iframe does not provide information about the response, such as:
- HTTP code
- HTTP status text
- Content-Type of response
- Headers
But you can emulate this support by wrapping the content in the tag <textarea>
:
<textarea data-status="403" data-status-text="Forbidden" data-content-type="text/json">
{"status": "Auth required"}
</textarea>
List of textarea
attributes:
data-status
(int) - (required) HTTP code of responsedata-status-text
(string) - HTTP response short description (see: HTTP Reason-Phrase)data-content-type
(string) - Content-Type of response (it is override value in headers)data-headers
(plain object or string) - List of header
Note: the real response code for iframe must be 200 for the correct processing of the contents textarea
.
If the request was sent via IFrame, then further transferred POST parameter X-Requested-With = IFrame
(that param, not header!).
That way you can have different responding depending on transport:
$response = json_encode(['status' => 'ok']);
if (!empty($_POST['X-Requested-With']) && $_POST['X-Requested-With'] === 'IFrame') {
echo "<textarea data-status="200" data-status-text="OK" data-content-type="text/json">{$content}</textarea>";
} else {
header("Content-Type: text/json");
echo $content;
}
- jQuery 1.7+
Tested with browsers:
- Internet Explorer 7+
- Chrome 7+
- Firefox 3+
- Opera 15+
- Safari 5+
- Android Browser 2.2+
- iOS Safari ?