I have a file upload on my website.
<form enctype="multipart/form-data" action="post.php" method="POST">
<input id="uploadInput" name="uploadedfile[]" type="file" multiple>
<input type="submit" value="PREVIEW POST">
</form>
The code will preview this image
After a user selects the files to be uploaded it will show this image
With javascript I want a simple text to be displayed right beside it after user selection and when its uploading.
And displays upload complete when all files have been uploaded
Can the above be done with just javascript or jquery?
If yes, how?
(I just want it to be simple and just display text. I dont want a progress bar.)
Short answer yes this can be done using JavaScript.
Longer answer, there are things to be taken care of on the bankend as well front end. Instead of doing it from scratch I would suggest you can make use of Jquery-file-upload to get this done. Obviously you have not mentioned what have you tried so far. So you can look at the wiki doc on how you can get this working.
Update
I did not mention this before, but you would not be able to do this without Ajax(iFrame work around/XHR file upload) and just using JavaScript.
This is a fairly simple case, but there is a bit of work involved to make this function properly cross-browser. There are libraries out there that will take care of most of this for you. One such library is Fine Uploader. You can use Fine Uploader's "basic" mode which allows you to create your own UI and still get the benefit of all of the cross-browser uploading code that the library provides.
Full disclosure: I am the primary maintainer of Fine Uploader.
I think you want upload files with ajax, Please follow this documentation. http://www.sitepoint.com/html5-ajax-file-upload/
Related
Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.
You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).
Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.
In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/
you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.
It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.
When we are uploading a file in html basically we write
<input type="file" />
and this code give ChooseFile button, no file chosen
But what I want is to create a Hyperlink and on clicking the hyperlink for it to work like an input of type="file" type - eg:
<a href="#" >ChooseFile</a>
any suggestions?
i think this is help to you..
<!DOCTYPE html>
<html>
<body>
<p>Click on one of the text labels to toggle the related control:</p>
<div>
<a href='#UPLOAD' >Upload a file</a>
<input type='file' name='file1'
style='cursor:pointer; opacity:0.01; alpha(opacity=1); position:relative; z-index:200; left: -10em; margin:-0.3em;' />
</div>
</body>
</html>
Don't think that you can style an input=file button beyond a certain limit,
check these links
http://www.quirksmode.org/dom/inputfile.html
Style input type file?
Or you can try a ready made plugin to do the job for you
https://github.com/blueimp/jQuery-File-Upload
Try using an existing jquery plugin for uploading files, i recommend this one:http://blueimp.github.io/jQuery-File-Upload/
Your best bet is to use a well-documented trick that will ultimately involve hiding the file input element as a child of a div that is styled to meet your needs. I say this is well documented as it is a very FAQ here on SO, and is covered on a number of other sites and blog posts on the internet.
Do not use javascript to click your file input element. You will likely run into security restrictions put in place by browsers. Some browsers may not even allow this. Others such as IE, will throw a security error when/if you attempt to send the file via javascript after using javascript to click the file input element.
If you want to avoid re-inventing the wheel, you can use a pre-built library that handles the complexity of cross-browser file uploading for you. I recommend Fine Uploader. It is well supported, quite active, and evolving quickly. Full Disclosure: I am the primary maintainer of this library.
I am working on HTML5 & I am a newbie in it.
I am working on a program which does the following :
I want to drag & drop files on a button.
User will be able to see all drag dropped files.
There needs to be a button to upload files.
After uploading, a progress bar should pop up on which there will be cancel upload & skip (if dont want to upload specific file) button.
Kindly let me know how can I do the same.
Thanks in advance.
if you know a little jQuery you can use jQuery UI droppable/dragable : http://jqueryui.com/demos/droppable/
Here are pretty simple examples for everything you asked : files from input tag, files from drag&drop, printing files names and showing a progress bar. I enjoy that website that makes it easy with the 'new' html5 features.
i want to show file upload dialog on click of a button thats not the part of input[type="file"] how can i do this?
Basically i want to stylize the file upload control of html.
Alternate way to style file inputs using JavaScript but no Flash:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I'm pretty sure there is no way to do this for security reasons.
You may be able to do it using a Flash-based uploader like SWFUpload. It obviously needs Flash installed and functions in a slightly different way than normal file uploads.
two days ago i was dealing with the same thing. I spotted uploadify
it allows you to have custom button for upload and ability to style your progress bar. it makes an ajax call to a php script. it also has loads of options from restricting file types/sizes/etc.
pretty happy i found it. same as pekka said this one also uses a flash gateway to do this.
document.formname.file.click() works but not in Opera i am still searching the net to solve.
Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.
My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.
So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?
This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.
Yes, it's possible (in most browsers) via opacity. Here's a tutorial.
I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).
Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.
You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).
I'd rather avoid transparency tricks.
This worked for me (uses jQuery):
$("#upload-box").change(function(){
$("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
$("#upload-box").click();
});
And the HTML:
<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />
It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.
When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.
Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.
Here's a jsfiddle. Thank you for upvoting my answer if you like it.
You can do it without any security issues.
Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.