How to rename the browse button as "Select the file"? E.g.:
<input type=file name=browse >
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
http://jsfiddle.net/J8ekg/
The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.
You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.
Wrap the <input type="file"> with a <label> tag;
Add a tag (with the text that you need) inside the label, like a <span> or <a>;
Make this tag look like a button;
Make input[type="file"] invisible via display: none.
A bit of JavaScript will take care of it:
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
Not the nicest looking solution, but it works.
You can do it with a simple css/jq workaround:
Create a fake button which triggers the browse button that is hidden.
HTML
<input type="file"/>
<button>Open</button>
CSS
input { display: none }
jQuery
$( 'button' ).click( function(e) {
e.preventDefault(); // prevents submitting
$( 'input' ).trigger( 'click' );
} );
demo
Here is the best, simple, short and clean way to "rename" the text of an input with file type and without JQuery, with pure HTML and javascript:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
The input type="file" field is very tricky because it behaves differently on every browser, it can't be styled, or can be styled a little, depending on the browser again; and it is difficult to resize (depending on the browser again, it may have a minimal size that can't be overwritten).
There are workarounds though. The best one is in my opinion this one (the result is here).
AFAIK you cannot change the button text, it is hard coded in the browsers.
But there are several workarounds to put a button with diferent text/image on a form:
link
No, you can't change file upload input's text. But there are some tricks to overlay an image over the button.
You can also use Uploadify, which is a great jQuery upload plugin, it let's you upload multiple files, and also style the file fields easily.
http://www.uploadify.com
Related
So I know how to do uploading in php, especially images. What I dont know is how to turn a image into a button such that clicking on it allows you to then be presented with an upload dialog that allows you to upload an image (or another file).
The typical way of doing upload input is: <input type="file" name="files[]" multiple />
But how do I take an <img /> and turn it into an image upload button?
I would use javascript for this, the principle is to hide the real file input and "click" it using javascript attached to an image
The input is positioned off the screen, if you hide it (display:none) with CSS, it will stop working in some browsers
<input type="file" class="file-select" name="files[]" style="position:absolute; left:-9999px" />
<img class="file-button" src="https://storage.googleapis.com/cdn.bark.com/qa/b5dc2e3e/a61da61d/3185c5d0/d0bfa4e1/d7d2cff4/dd6dff79/00457b9a/1009914c/6cbe2b57/fb0d89c1/d292ac8a/d6800521/a797a21a/fe1de44a/ef665fad/f1d83fce/thumbnail_529621c60502a.jpeg"/>
Then we simply use javascript to say that when the image is clicked, "click" on the file input:
$('document').ready(function(){
$('.file-button').on('click', function(e){
$('.file-select').click();
e.preventDefault();
});
});
See this JSFiddle for full demo:
http://jsfiddle.net/HhLzD/
I'm writing a code to browse and upload a file in a single step.
I have this code in place:
<input type="file" id="image" style="display: none;">
<input type="submit" name="upload" id="upload" value="upload"
onclick="document.getElementById('image').click();">
This code allows me to select the file and also submit the form but I want to use the $_FILE attributes and since there is no name field in the file-input, I cannot access the file information.
So I modified my code to add the name field as follows
<input type="file" name="image" id="image" style="display: none;" />
<input type="submit" name="upload" id="upload" value="upload"
onclick="document.getElementById('image').click();" />
Now, with this code, i'm still able to browse the file but it is not submitted. So in a nutshell i'm not able to access $_FILE with both the methods.
Any suggestion what I can do to move ahead. ??
TIA
To have the selected image made available in the $_FILES array in PHP, you need to give the file field a name attribute and set the enctype of the form to multipart/form-data so that the browser posts correctly.
<form action="some.php" method="post" enctype="multipart/form-data">
<input type="file" id="image" name="image">
<input type="button" value="select image" id="button">
</form>
To be able to still use the .click() method on the file input it must not have been taken out of the document (ie: display: none won't work), so you can use:
input[type=file] {
position: absolute; height: 0; width: 0; /* should be totally squashed */
visibility: hidden; /* just in case */
}
Then you can use your JavaScript to open the select dialog and submit the form
$('#button').click(function() {
$('#image')[0].click();
});
$('#image').change(function() {
$('form').submit();
});
(Here assuming that you have jQuery on your page, here's a working example http://jsfiddle.net/steveukx/V4yE3/)
While I'm not supporting your method here (its does not separate markup from behavior), you could try adding a return true in onclick.
This code just wont work cross-browser. On chrome, you can't call click() on a hidden input[type=file] element.
Even when you switch it to visible, putting the click() in an onclick or onsubmit handler will also not work - the form will not be submitted with the new file value. This is a security feature. Browsers do not want you to do this.
Flash can do what you want. Check out the YUI Uploader component: http://developer.yahoo.com/yui/uploader/
If you want to upload a file without reloading the page use AJAX file upload jQuery plugin uploads the file somehwere, and passes the response to a callback, nothing else.
It does not depend on specific HTML, just give it a <input type="file">
It does not require your server to respond in any particular way
It does not matter how many files you use, or where they are on the page
-- Use as little as --
$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});
-- or as much as --
$('input[type="file"]').ajaxfileupload({
'action': '/upload.php',
'params': {
'extra': 'info'
},
'onComplete': function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
},
'onStart': function() {
if(weWantedTo) return false; // cancels upload
},
'onCancel': function() {
console.log('no file selected');
}
});
As I understand you just want to a) hide browser specific file browse control and provide your own styled button and b) select and upload file at the same time (e.g. upload your photo when the file browse dialog is closed).
In this case you need something like that:
<form name="myForm" method="POST">
<input type="file" name="image" id="image"
style="position: absolute; left: -1000px;"
onchange="myForm.submit();" />
<input type="button" name="upload" id="upload" value="upload"
onclick="document.getElementById('image').click();" />
</form>
Works in Chrome (don't hide file input but move it outside the page). If there are any issues with other browsers I would recommend to use jQuery.
HTH
<input type="file" id="image" onchange="yourForm.submit();">
The structure looks like this:
<form>
...
some stuff
...
file select
...
some stuff
...
</form>
I need to send the input data from "file select" while not sending "some stuff" and as far as i've tried I couldn't get a form inside another form so that's not an option.
The way it works is like this: the file select control isn't displayed at first, clicking a button makes it show the control and some other stuff. I need a button to submit that file to be checked for different things (naming, size, etc) and uploaded to the server, without changing or reloading the rest of the window.
I could change the layout a bit and get the file select stuff out of the form but the boss doesn't want to change the design of the window and removing the outer-most form will be a lot of work as it's a very complicated part of the web site.
So, as the question says: Can I do it? Can I get the file trough javascript and send it to another php file for processing?
The most browser compatible way to achieve this is to use a hidden iframe that you submit the form into. For example:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
// now reset for next step in the form
form_elem.action = '/next_step.php';
form_elem.target = null;
};
</script>
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Ajax file upload
Is it possible to write an ajax request with JQuery that "submits" a form with a file field? I want to do it because in this way i can make the user upload a file without leaving the current page.
How should i write the $.ajax() call? and in particular how should i set into the ajax call the file field?
EDIT: I'd like to use only core JQuery functions, without plugins.
Thanks.
To maintain compatibility with the widest range of browsers this needs to be done through a hidden iframe.
Here is some sample code to demonstrate what I mean:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
};
</script>
There are projects out there that make this easier such as Plupload
It's hard. You're much better to use a service that already exists.
I did this recently on a site because I needed the whole form to submit without reloading the page, and uploadify was the best AJAX file uploader I found.
I'm trying to use YUI uploader, but I'm not able to open the file dialog window when I click the browse button. I'm following (more or less) the example on Yahoos demo.
Here is my HTML code:
<div id="fileProgress">
<input id="fileName" type="text" size="40" />
<input id="uploaderUI" name="uploaderUI" class="submitButton" type="button" value="Browse" />
<input id="uploadFile" name="uploadFile" class="submitButton" type="button" value="Upload" />
<div id="progressBar"></div>
</div>
And here is my javasctips code:
jQuery(document).ready(function() {
initYUIUpload();
});
function initYUIUpload()
{
YAHOO.widget.Uploader.SWFURL = "wp-includes/js/yui/assets/uploader.swf";
var uploader = new YAHOO.widget.Uploader("uploaderUI");
uploader.addListener('contentReady', handleContentReady);
uploader.addListener('fileSelect',onFileSelect)
uploader.addListener('uploadStart',onUploadStart);
uploader.addListener('uploadProgress',onUploadProgress);
uploader.addListener('uploadCancel',onUploadCancel);
uploader.addListener('uploadComplete',onUploadComplete);
uploader.addListener('uploadCompleteData',onUploadResponse);
uploader.addListener('uploadError', onUploadError);
jQuery('#uploadFile').click(function(){ upload() });
}
UPDATE
I "gave up" using YUI uploader, and I'm using Uploadify now.
I had this exact same problem.
There is a bug with the 2.8 version of uploader.swf
If you had the same problem as me, than switching to the 2.7 version of uploader.swf will make your events fire as expected.
I think it might have something to do with this note from the YUI Uploader page:
Because of security changes in the upcoming Flash Player 10, the UI for invoking the "Browse" dialog has to be contained within the Flash player. Because of that, this new version of the Uploader is NOT BACKWARDS COMPATIBLE with the code written to work with the previous version (it is, however, compatible with Flash Player 9). Do not upgrade to this version without carefully reading the documentation and reviewing the new examples.
This means instead of calling your upload function directly from the <input> button, you have to create another <div> which will contain the transparent Flash overlay created by YUI uploader.
See the example from the YUI site:
<div id="uiElements" style="display:inline;">
<div id="uploaderContainer">
<div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
<div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
</div>
<div id="uploadFilesLink"><a id="uploadLink" onClick="upload(); return false;" href="#">Upload Files</a></div>
</div>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var uiLayer = YAHOO.util.Dom.getRegion('selectLink');
var overlay = YAHOO.util.Dom.get('uploaderOverlay');
YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.right-uiLayer.left + "px");
YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.bottom-uiLayer.top + "px");
});
</script>
ok normally when happend that the concern is about the swf file, cause is this file who open the dialog not JAVASCRIPT, so you have to download the file and put in you server you can't access directly in the yahoo site.
also you can use this dependency
best
Nahum
PS. My first time using yui upload had the same problem.