J'ai créé un formulaire avec un bouton. Si les utilisateurs cliquent sur le bouton, le navigateur générera une fenêtre contextuelle pour télécharger et recadrer une photo. Si elle est téléchargée p> document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";
4 Réponses :
Essayez d'utiliser une forme modale dans laquelle vous pouvez appeler la boîte de dialogue pour l'utilisateur pour télécharger et recadrer l'image et cliquer sur cette photo sur la boîte de dialogue; Retournez sur votre page et continuez votre application.
Meilleures performances, vous pouvez utiliser Formulaire modal JQuery avec Lighbox pour un meilleur UI.
acclamations !!!
Quel est le problème?
Prendre Appliquez ensuite une boîte de dialogue avec jQuery sur ce Maintenant, comme pour le code lui-même - je suis sûr que vous devez refaire de refaire quelques choses, mais l'idée est très simple et je ne comprends vraiment pas pourquoi cette question a une prime de +100 réputation, vraiment. Pas ça que j'ensidais d'avoir elle haha! upload.php s (le truc dans l'élément ) et mettez-le à l'intérieur de la page de l'appelant, dans un div .
div . Ensuite, activez simplement cette boîte de dialogue si nécessaire.
J'espère avoir ce que vous essayez exactement d'atteindre.
Voici l'exemple JSfiddle: http: //jsfiddle.net/nnw33/3/ p>
Voici le code: p> html: p> <input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
Upload content here
<div id="errMsg"></div>
</div>
Vous devriez lire ce plugin mignon, ce qui vous permet de télécharger des fichiers asynchronement.
HTTP : //malsup.com/jQuery/form/#OPTIONS-Object p>
Ajouter après le suivi code> Body CODE> SUR LA PAGE STI: P>
function onComplete(xhr) {
// Lets expect that the server sends back
// the URL pointing to uploaded image, an error if failed
if (xhr.responseText.match("error")) {
// failed
$("#feedback").html("Upload failed: " + xhr.responseText);
} else {
// uploaded
$("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
// image accepted, close dialog and set the image on main page
diaDom.dialog('close')
$('#targetOnPage') // ....
});
$('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');
}
}
function openPopup() {
// get the dialog DOM node (if first time, create)
var diaDom = $('#modalFormDia')
diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
buttons: {
"Cancel": function() {
$(diaDom).dialog('close');
}
},
closeOnEscape: false,
autoOpen: true,
modal: true,
title: 'Image Uploader'
});
// setup form with hooks
$('#myForm').ajaxForm({
beforeSend: function() {
$('#feedback').html('Upload starting')
},
complete: onComplete
});
}​
Vous ne pouvez pas simplement échanger la popup avec la boîte de dialogue. Vous devez réimplémenter la pop up sous forme de dialogue.
La réponse de moi est-elle suffisante ?? La prime est toujours en hausse ??