I know this has been asked by a few people but I haven't seen the answer. I have a php upload form for a file upload in a div tag. Is it possible to submit the form and upload the file without a page refresh? I haven't found the plugins to work because I want to submit the form with a title and other data attached as well. Any suggestions? I looked at using an iframe, but i'm not sure it will work in an upload.php wrapped in a div tag?
Here is the most simple solution you can use: Image upload without page refresh.
No obligation to use the javascript part, but it gives you the opportunity to show a notice that the transfer has been correctly done.
If you are open to jQuery and want a more open solution, I suggest you to take a look at the jQuery Form Plugin that can manage it all for you, with some extras that could be interesting.
My favourite tool for this is Uploadify. It includes real-time progress indicators, drag-and-drop, etc.
There are other, older solutions as well, including this one. That page has a simple demo that may provide a good example for how to do this on your own.
Honourable mention goes to Dave Walsh's facebook-lightbox, into which you might be able to put a file upload form. Worth a try if you like the look.
Try using something like AIM (http://www.webtoolkit.info/). And you should really get a little more experience on html, php and js.
Related
I'm making an web app that allow user to input form and generate word document. The form is relatively complex and I use a lot of jQuery and jQuery Mobile framework. I try to plugin the demo from opentbs ut it seems like it doesn't do anything when I have:
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
when I comment it out it looks fine.
Does any one has problem like that?
I also having problem to find the resources of how to modify the template within the docx.
I know here like variable that so I can modify it through php form but is there more detail documentation for it?
I found that there's nothing to do with opentbs it was jQuery that is assuming the post is ajax request therefore I cannot have file download (I am not sure if I am explaining it 100 percent correctly). However, I found the work around: put the script below right before jQuery Mobile script. It works for me.
<script>$(document).bind("mobileinit", function(){$.mobile.ajaxEnabled = false;});</scipet>
or this link in your htnl tag:
<a href="download.php?file=test.txt" rel="external">test.txt<a>
I want make an uploading system with ajax [none page reload]
I have search on google, found some thing, upload in iframes , File API etc...
Old browsers havent file API, and I have some problems with iFrame uploading in IE ,
Is there any way to make it with working in all browsers?
Since your tags include jquery, I would suggest that the best solution for you would be the jQuery Form Plugin.
This plugin makes it very easy to work with forms via ajax, including forms with file upload fields. You don't need to worry about the browser API or whether it supports it or not; the plugin deals with all that behind the scenes.
There are good examples on the plugin's website, and I can confirm it works well as I've just implemented it in a project myself.
Hope that helps.
Use Uploadify. It's really simple and looks great.
http://www.uploadify.com/
spent hours on end searching the net but it seems im looking for one thing and finding another, either that or what i want just cannot be done. i do not want to re-style the <input type="file"> i want to create a custom button that brings up a browse window, lets the user select a file of certain types, populates a seperate text box with the file name and stores the rest of the information in a way that could be passed to a php upload script after the user has filled in the rest of the form. So in other words i want to re-invent the <input type="file">.
http://www.uploadify.com/demos/
Uploadify is a powerful and highly-customizable file upload script. In its simplest form, Uploadify is easy to get up and running with minimal effort and little coding knowledge.
Uploadify can also be modified to suits the needs of more advanced developers via the arsenal of custom options that are available.
http://www.uploadify.com/documentation/
buttonImg parameter : we can give the image/text which we wanted to show ie we can customize browse button.
This can't be done in regular html, but possible to do using flash or silverlight etc. You might want to have a look at Plupload, which is a fairly foolproof upload solution in my opinion.
This is not possible, the browse button is implemented in a very secure way, not allowing it to be styled or to do any tricks with it. This is because it could in some way allow the developer to trick the user in uploading a different file then intended.
in simple php its possible.
try this
+Create Album
I am uploading a file on my website. It works fine. Now i want to display progress bar while it take time in uploading.
I have option to chenge uploading through ajax, but i can not use ajax. Can it possible to show without using ajax and without disturbing the code.
$image = new SimpleImage();
$objdjs= new Djs;
if(isset($_POST['btnprofile']))
{
if($_FILES['profilegallery']['name']!=""){
$res1 = $objdjs->upload_file($_FILES['profilegallery'],PATH_PROFILE_IMAGE);
$image->load(PATH_PROFILE_IMAGE.$res1);
$image->resize(46,36);
$image->save(PATH_PROFILE_IMAGE."thumb_".$res1);
$title=trim($_POST['title1']);
$ins = $objdjs->insertprofile($uid,$title,$res1);
$messageProfile="<span style='color:#336600'>Image has been added in profile gallery</span>";
echo "<script>window.location='listprofilegallery.php?ms=true';</script>";
any help will be appricated
Thanks
You can try SWFUpload, it does have a customizable progress bar, but this only works with flash. There's also a jQuery plugin called uploadify
The very ugly but fast solution is to put an iframe that refreshes itself.
Why not use Ajax?
You talk about not changing the code (much), so I think the easiest option is (eugh) a flash uploader. When you say "but I cannot use AJAX" I'm going to assume you mean "I don't know how to use it yet". In this case, I'd recommend jQUery and AJAX. You still couldn't have a progress bar (unfortunately), but it will help you learn AJAX.
I think what your asking is basically impossible, when your user would submit the form you would be stuck. Then only way to create some upload progress bar is
javascript/ajax
flash
java applet
What you want to do is impossible with just PHP. PHP is a server-side language that cannot directly effect the page once it has been served to the browser. You would need some Javascript to do this, AJAX really.
There are two good options:
use swf
use AJAX
I have created a file-upload form and I want to output "filetransfer succeeded" in a <div> when the file transfer is done.
This is easilly done on a normal form using Jquery and Ajax but since this is a file upload it is not possible to use ajax.
So how do I upload a file and give feedback back to the user?
Consider looking at uploadify or swfupload.
I have personally used uploadify and you can do:
$('input[type=file]').MultiFile({
list: '#DIV to update'
});
jQuery actually has a pretty slick plugin called uploadify that'll let you do this. Alternately the iFrame solution Emil suggested will work as well without any outside libraries.
You can do it in an iframe.