Once again a question...it's almost driving me crazy for hrs :-/
My problem:
I have an upload form on my website and the upload works fine. But I want to give the user a feedback while uploading, cuz it can take a few seconds depending on the file size.
I thought about showing a gif animated progress bar in a div and show it with javascript. I tried it, but it just won't show up when I'm hitting the submit button...and when I'm adding onSubmit=".... return false;" the upload won't work anymore...
here is my code:
in the head:
<script type="text/javascript">
function showHide() {
var div = document.getElementById('progressBar');
if (div.style.display == 'none') {
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
}
</script>
body:
<div id="progressBar" style="display:none;height:40px;width:250px;margin:0px auto;">
<img src="img/progressbar.gif" alt="Progress Bar">
</div>
<form name="photo" id="upload_big" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" onsubmit="showHide();">
<input class="linkinput" type="file" name="image" size="20"/>
<input type="submit" name="upload" id="uploadbutton" value="Upload image"/>
I would appreciate any help...and since I'm a rookie -> please help me to get better instead of judging ;-)
Thanks out there!
It's because when the submit event has triggered, the browser already sent the form and will go to another page.
Use jQuery:
$(function() {
$('#upload_big').submit(function() {
showHide();
});
});
Sometimes, the form submission prohibits you from casting anymore JavaScript functionality on the page. To be on the safe side, you should also base functionality not on the form submission event, but on the <input type="submit"> click:
$(function() {
$('input#uploadbutton').click(function(e) {
showHide();
e.preventDefault();
});
});
Related
I have a modal containing a form and an iframe.
The form has a file field and post to the iframe.
The php controller return the uniqid (basically the name) of the uploaded file.
The upload works well and my iframe contains the uniqid.
I would like to display this uniqid on my main page.
My issue is that I don't know how to wait the end of the upload to show the uniqid.
The form and iframe :
<form id="uploadForm" enctype="multipart/form-data" action="{{ path('lesson_upload') }}" target="uploadFrame" method="post">
<label for="uploadFile">Document :</label>
<input id="uploadFile" name="uploadFile" type="file" />
<br /><br />
<input class="btn btn-primary" id="uploadSubmit" type="submit" value="Upload" />
</form>
<div id="uploadInfos">
<div id="uploadStatus">Aucun upload en cours</div>
<iframe hidden id="uploadFrame" name="uploadFrame"></iframe>
</div>
The JavaScript to fill the modal with the form :
$(document).on('click', '#computer-upload', function ()
{
var url = Routing.generate('lesson_upload_computer');
$.get(url, function (data)
{
$('#modal-various .modal-body').html(data);
return false;
});
return false;
});
The iframe at the end of an upload :
<div id="uploadInfos">
<div id="uploadStatus">Aucun upload en cours</div>
<iframe hidden="" id="uploadFrame" name="uploadFrame">
#document
<html>
<body>
<body>533ebac647b7e</body>
</body>
</html>
</iframe>
</div>
Does anyone have an idea ?
Thanks !
If you don't use an AJAX upload, after a little research, you cannot add an event that detects when the upload has finished.
You now have 2 options:
Fetch the id from the iframe every ~100ms and if it is not empty or null, the id will be in:
document.checkForId = function() {
id = $('#uploadFrame').contents().find('#idInIframeDivOrOtherContainer');
if (id) {
window.clearInterval(intervalId);
}
};
$(document).ready(function() {
intervalId = window.setInterval('document.checkForId', 100);
});
When posting data, return javascript that sets the id in the main page (if you have jquery in the iframe):
<script>
$(document).ready(function() {
$('#divInParentWindow', parent.document).text('<?php echo $id; ?>');
});
</script>
If your iFrame has its source on the same server/domain level as your main page. You could simply define a function at your main page
function iframeHasLoaded() {
var body = document.getElementById('uploadFrame').contentWindow.document.body.innerHTML;
}
And, from your iFrame
window.onload=function() { parent.iframeHasLoaded() };
This should work.
I don't know how to explain this, but I will do my best...
I am trying to submit a form normally, but the request result will be displayed at a iframe. Everything goes fine to here. What I want to do (if it is possible) is to animate the form putting a message into it (like "sending...") ultil the iframe is load with the respose. I now this is so confuse, but take a look to my files:
index.php
I have ommited the header because is so obvius.
<form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe" id="form-upload">
Choose your file here:
<input name="uploaded_file" type="file"/>
<input id="send-button" type="submit" value="Subir imagen"/>
</form>
<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0"></iframe>
<script type="text/javascript">
$(document).ready(function(){
$('#send-button').sendImage({formid: "form-upload"});
});
</script>
upload.php
Just for testing porpuses.
<?php
if( isset($_FILES['uploaded_file']) )
echo "image sent";
animate.js
This is where I am dealing with that. Because when I access the index.php always the message sending... is showed instance of the form elements.
var conf;
jQuery.fn.sendImage = function(args) {
conf = $.extend( {
}, args);
this.on('click', function(e){
e.preventDefault();
$('#'+conf.formid).submit();
$('#'+conf.formid).html('sending...');
});
}
Once a form is submitted, all processing on the current page stops. Anything you do must be BEFORE you actually submit the form. You alternative is to submit via AJAX.
I am using JQuery and SimpleModal Confirm Modal Dialog to show a confirm box before uploading. The form is submitting fine but as i'm checking isset submit button in PHP therefore it fails. How could i submit post using JQuery with setting submit button.
Here is the code
HTML
<form enctype="multipart/form-data" action="#duc" method="post" id="uploadform" >
<input name="file" type="file" >
<input name="Submit_upload" type="submit" value="Upload" id="Upload" >
</form>
JQuery
jQuery(function ($) {
$('#Upload').click(function (e) {
e.preventDefault();
confirm("Continue to the Upload?", function () {
$('#uploadform').submit();
});
});
})
PHP
if(isset($_POST['Submit_upload']) && $_FILES['file']['name'])
{
// file uploading process.
}
I think as after confirm JQuery submitting the form so the actual submit button is not adding in the post array. any help will be much appreciated.
When you submit the form via .submit, type=submit input values are not sent at the same time. There are a ton of different ways to solve/handle this. One is to do:
<input name="Submit_upload" type="hidden" value="true">
<input type="submit" value="Upload" id="Upload">
The hidden input will be sent.
I have tried your code and it is working fine man
i just use one page to use your code. on top i put your PHP code then jquery code in head after jquery.in and then html part and its working fine why it is not working in your machine might you clean cache or browser;
here is my code
<?php
if(isset($_POST['Submit_upload']) && $_FILES['file']['name'])
{
echo $_POST['Submit_upload'];die;
}
?>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function ($) {
$('#Upload').click(function (e) {
e.preventDefault();
confirm("Continue to the Upload?", function () {
$('#uploadform').submit();
});
});
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="#duc" method="post" id="uploadform" >
<input name="file" type="file" >
<input name="Submit_upload" type="submit" value="Upload" id="Upload" >
</form>
</body>
</html>
Let me know if anyone know what is the issue with this code.
Basically i want to upload a file using jQuery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(event) {
$('#form1').submit(function(event) {
event.preventDefault();
$.post('post.php',function(data){
$('#result').html(data);
});
});
});
</script>
</head>
<body>
<form id="form1">
<h3>Please input the XML:</h3>
<input id="file" type="file" name="file" /><br/>
<input id="submit" type="submit" value="Upload File"/>
</form>
<div id="result">call back result will appear here</div>
</body>
</html>
and my php 'post.php'
<?php
echo $file['tmp_name'];
?>
Uploaded File name is not returned back. Issue is i couldn't access the uploaded file.
Thanks in advance!
Shiv
Basically i want to upload a file using jQuery
You cannot upload files using AJAX. You could use the jquery.form plugin which uses a hidden iframe:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(event) {
$('#form1').ajaxForm(function(data) {
$('#result').html(data);
});
});
</script>
</head>
<body>
<form id="form1" action="post.php" method="post" enctype="multipart/form-data">
<h3>Please input the XML:</h3>
<input id="file" type="file" name="file" /><br/>
<input id="submit" type="submit" value="Upload File"/>
</form>
<div id="result">call back result will appear here</div>
</body>
</html>
Also notice the enctype="multipart/form-data" on the form.
Another possibility is to use the HTML5 File API which allows you to achieve that assuming the client browser supports it.
It's not possible to upload files with jQuery $.post, neverthless, with the file API and XMLHttpRequest, it's perfectly possible to upload a file in AJAX, and you can even know how much data have been uploaded yet…
$('input').change(function()
{
var fileInput = document.querySelector('#file');
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/');
xhr.upload.onprogress = function(e)
{
/*
* values that indicate the progression
* e.loaded
* e.total
*/
};
xhr.onload = function()
{
alert('upload complete');
};
// upload success
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
// if your server sends a message on upload sucess,
// get it with xhr.responseText
alert(xhr.responseText);
}
var form = new FormData();
form.append('title', this.files[0].name);
form.append('pict', fileInput.files[0]);
xhr.send(form);
}
No no no, you should use a jQuery form plugin for async uploading files. You can't upload file with jQuery $.post method. The file will be uploaded with hidden iframe
Another way is to use HTML5 uploading with FileAPI/BlobApi
Your upload.php has some error.
you should change your this part.
echo $file['tmp_name'];
to:-
echo $_FILES['file']['tmp_name'];
Try uploading with an iframe because you can't send a file with $.post method.
You could also try jquery uploadify - http://www.uploadify.com/
I am using the following code to effect an iframe that allows an ajax file upload on submit of the form without refresh.
This works as expected
window.onload=init;
function init() {
document.getElementById('form').onsubmit=function() {
document.getElementById('form').target = 'iframe';
}
}
What i would like to do is the same thing but 'onchange' of the file field input, i.e. when the user has chosen a file, to autmatically trigger the init() function and thus upload the file. I have tried with this code:
document.getElementById('file').onchange=function(){...
This doesn't work, and i'm completely stuck. Any ideas?
Many thanks
This should work for you
<script type="text/javascript">
window.onload = function() {
// add old fashioned but reliable event handler
document.getElementById('file_input').onchange = function() {
// submit the form that contains the target element
this.form.submit();
}
}
</script>
<iframe name="my_iframe"></iframe>
<form target="my_iframe"
action="your/file.ext"
method="post"
enctype="multipart/formdata">
<input type="file" name="my_file" id="file_input">
<!-- for no js users -->
<noscript>
<br/>
<input type="submit">
</noscript>
</form>
i think something like .live() will solve your issue hopefully, comment if you want more info on how to use it...
Give the file input element an id and:
$(document).ready(function(){
$(element).change(function(e){
fileInfo = e.currentTarget.files[0];
init();
});
});