I would like to create a file upload form, but the < input type="file" > tag is too ugly and not customizable, that's why I did a trick. The base idea came from here:
How Can I Create a Custom File Upload With Only HTML, JS and CSS
The problem is when I specify the name property in this tag the upload will not work in IE. check it here:
http://jsfiddle.net/W3a3J/35/
use the Browse and Upload buttons. In the first case it will work, the data is sent and the page is refreshed. But in the second case if you click the Upload button it will just erase the path from the tag.
It is mainly because IE8 does not support CSS3
Related
I am working on a project, in which I am giving a website platform for users to upload their files on server and server will print those files using hardware printer.For instance if a user is uploading a file for printing then he will need to select
number of copies
black&White or colored
With repect to each file. With the normal file input tag i can able to select multiple files and i use copies and colorscheme once in the form like belowMy file input
I want something like this,
This way i want
here each time i select file a new field should generate with those two inputs and when i click submit all files should be processed using php with respective copies and colourscheme for indivisual file. I seen many plugins like uploadify, jQuery File Upload, Plupload, Krajee Bootstrap File Input Demo etc.
But modifying these plugins as per my requirements is very difficult for me since i am beginner to jQuery
I want something as simple as possible even with a dull interface. I would really appreciate if someone can help me to sort out my problem.
Thank you
I have a Image, FileUpload and a Button controls. I want to save the image to the server from the local path obtained from FileUpload control. I implemented this functionality on Button Click in C#..
Now i want to set the image URL of Image control OnClientClick of the same button on which server side code is implemented.
Image URL will defer everytime depending on file selected in FileUpload control. Can anyone help me to understand how javascript can be used to set image URL based on thre file selected in File Upload Control?
First of all, understand that JavaScript doesn't understand, care, or even know about C# and its fancy "controls". It just deals with HTML. Period. That said, you can use JavaScript's setAttribute function to set the image URL of an img tag (not control). Like this:
document.getElementById('my-image').setAttribute('src', 'http://ecx.images-amazon.com/images/I/41%2BjAZ4dUGL._SS500_.jpg');
Demo here:
http://jsfiddle.net/je9Gx/
You can use this code to find the image control, where imgid is ID of image control;
$("[id$='imgid']").attr("src",pathfromfileuploader);
//pathfromfileuploader=it is a variable which stores the path taken from file uploader;
Hope it will help :)
I want to change the name of the image in file uploader using jquery.is there any chance to do that please let me know.I am struggling with that.
I am using the regular html file uploader
Thanks,
Sravz
It is impossible to change what is displayed in the file field after you have chosen a file. You can change the style or hide the text altogether though.
If you need to rename the file you will have to do it using whatever server side language you are using when the file is actually uploaded.
Is that HTML form only support pure text only? Can I use some JS / CSS trick to let the HTML form have image embedded?
What do you mean by "image embedded"?
If it's only for decoration, you can put it before or after the form and position it with CSS as needed.
If you mean, submit an image (or any kind of file) then use input type="file".
Regarding image directly in form, it may work but I'm not sure the document will validate. Better check it out.
Use an Image tag.
http://www.w3schools.com/htmL/html_images.asp
If you mean embedded image in base64 for example, it is not possible.
You have to link a file and you cannot create a file in Javascript.
This Html Code Works Like Img But Can Show Any File Your Browser Supports.
I Tested This iframe Myself.
<iframe src="(Your Base 64 Code)"></iframe>
This Site is Not My Creation.
Use This Link To Convert Any File To Base64
How to make the browser upload and display image after the user puts it in the file upload widget? I've got a form where an image should be uploaded and edited by the user on the fly (before they hit submit). Can I do it with Jquery?
Take a look at the JQuery MultiFileUpload plugin.
MultiFileUpload plugin should give you what you're looking for. It's important to remember that ajax does not support transferring binary files - you'll need an embedded IFrame to do the work for you.