J'ai écrit un blog post à propos de cela avec jQuery pour télécharger un fichier en utilisant un iframe caché. Voici le code:
Voici le code HTML pour le formulaire:
<div id="uploadform">
<form id="theuploadform">
<input type="hidden" id="max" name="MAX_FILE_SIZE" value="5000000" >
<input id="userfile" name="userfile" size="50" type="file">
<input id="formsubmit" type="submit" value="Send File" >
</form>
Le DIV dans lequel pour permettre jQuery pour créer le iframe, vous pouvez le cacher avec un peu de CSS:
<div id="iframe" style="width:0px height:0px visibility:none">
</div>
la DIV où pour afficher les résultats du rappel:
<div id="textarea">
</div>
le code jQuery:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#formsubmit").click(function() {
var userFile = $('form#userfile').val();
var max = $('form#max').val();
var iframe = $('<iframe name="postframe" id="postframe" class="hidden" src="about:none" />');
$('div#iframe').append(iframe);
$('#theuploadform').attr("action", "uploader.php")
$('#theuploadform').attr("method", "post")
$('#theuploadform').attr("userfile", userFile)
$('#theuploadform').attr("MAX_FILE_SIZE", max)
$('#theuploadform').attr("enctype", "multipart/form-data")
$('#theuploadform').attr("encoding", "multipart/form-data")
$('#theuploadform').attr("target", "postframe")
$('#theuploadform').submit();
//need to get contents of the iframe
$("#postframe").load(
function(){
iframeContents = $("iframe")[0].contentDocument.body.innerHTML;
$("div#textarea").html(iframeContents);
}
);
return false;
});
});
</script>
J'ai utilisé une application php comme ceci uploader.php faire quelque chose avec le fichier:
<?php
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$maxfilesize = $_POST[MAX_FILE_SIZE];
if ($maxfilesize > 5000000) {
//Halt!
echo "Upload error: File may be to large.<br/>";
exit();
}else{
// Let it go
}
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
print('File is valid, and was successfully uploaded. ');
} else {
echo "Upload error: File may be to large.<br/>";
}
chmod($uploadfile, 0744);
?>
Il y a plus là que vous avez besoin, mais il illustre le concept en jQuery.
Wow. Tout ce code pour quelque chose de si simple? Vous pouvez utiliser l'attribut target du FORM, le mettre en corrélation avec l'attribut name de l'IFRAME, et il sera soumis naturellement! –
@Josh, Pop que dans une réponse avec un peu de code puis;) –