假设你在服务器方面有工作能力,这里是一种小型功能,也是如何用java字母实施iframe ha的例子。
<><><><>>>>>
<form name="image-upload">
<input type="file" name="image" /></br>
<button type="submit" name="upload">Upload</button>
<div id="upload-results"></div>
</form>
http://www.ohchr.org。
var fileUpload = function(form /* HTMLElement */, action /* Form Action URL */, callback /* Callback function */) {
/* vars */
var atribs = {
"target": "upload_iframe",
"action": action,
"method": "post",
"enctype": "multipart/form-data",
"encoding": "multipart/form-data"
}, iframe;
/* iframe listener */
var ilistener = function() {
var results;
listener.remove(this, load , ilistener);
if( contentDocument in this ) {
results = this.contentDocument.body.innerHTML;
} else if ( contentWindow in this ) {
results = this.contentWindow.document.body.innerHTML;
} else if ( document in this ) {
results = this.document.body.innerHTML;
} else {
throw "i m dead jim :/";
}
callback.apply(this,[results]); // call the callback, passing the results
this.parentNode.removeChild(this); // remove the iframe
};
/* create the iframe */
form.parentNode.appendChild(FragBuilder([{"tagName": "iframe","id": "upload_iframe","name": "upload_iframe","style": {"height": "0","width": "0","border": "0"}}]));
/* collect the iframe back */
iframe = By.id( upload_iframe );
/* set the form properties */
for( var attr in atribs ) {
if( attr in form ) {
form[attr] = atribs[attr];
}
}
/* attach the event listener to the iframe */
listener.add(iframe, load , ilistener);
/* submitting the form */
form.submit();
};
// get the form, and the results area
var form = document.forms[ image-upload ], results = By.id( upload-results );
// listen for the form submit, capture it, and run the iframe upload.
listener.add(form, submit , function(e) {
e.preventDefault();
results.innerHTML = Uploading... ;
fileUpload(this, server.php /* really anything */, function(data) {
console.log(data);
results.innerHTML = "Uploaded!";
});
});
Please note: for simplicity purposes I have used the following utilities.
https://github.com/rlemon/FragBuilder.js DocumentFragment builder from JSON input.
https://gist.github.com/2172100 event listener, and By utility functions.
*these are both easily removed.