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.
Related
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
I am using a PHP script to write in an image.
Source: http://papermashup.com/demos/php-gd-image-and-text/
I want to hide the image and after clicking the "Update Image" button the generated image would then be displayed?
Using Jquery Hide(); , show() function to achieve the functionality.
If you can put a code snippet here it will help people to understand the problem more clearly
You need javascript for this.
Basically, php only runs once before the page is loaded, so it can't change the contents of the page after it's loaded.
You can either use document.InnerHTML (look it up) or jquery .load
You can do this by using jQuery like
Suppose your input button has id like clickme and image which you want to hide has id like hideme then bind a jQuery event to this.
$('#clickme').click(function(){
$('#hideme').hide();
});
Just include basic jQuery libraries to your page.
<div id="hidden_div" style="display:none">
<img src=<?=$filename;?>?id=<?=rand(0,1292938);?>" width="800" height='600'/>
</div>
<input name="submit" type="submit" class="btn btn-primary" value="Update Image" onclick="showHide()"/>
</form>
</div>
<script type="text/javascript">
function showHide() {
document.getElementById("hidden_div").style.display = "block";
}
</script>
I used this. Is working, but it shows generated image for just a sec, then it's refreshing.
i have this cod that insert text to data base, but i need insert the images withe text into data base.
my code ajax like :-
function AddComment(){
var text=$("#text").val();
$.ajax({
type:"post",
url:"application/controllers/process.php",
data:"text="+text+"&action=add",
success:function(data){
showComment();
}
});
}
my form :-
<form>
<input id="inputUpProfile" name="inputUpProfile" class="inputUpProfile hidefile" type="file" onchange="readURL(this)"/>
<img id="blah" src="#" width="100" height="100" style="display:none" />
<textarea name="post" id="text" rows="3" cols="40" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
<ol class="controls clearfix">
<input type="button" id="sent" onclick="AddComment();" class="uibutton confirmb" value="Send">
</form>
To upload an image using Ajax, you need to use an iFrame, a flash plugin or something like that. With iFrame, the concept is that you have an iFrame (invisible) somewhere on your page with an ID. You point your form's target attribute at it, then in the result page in the iFrame you call a function in the parent window's javascript which triggers the result in your main window. It's fairly straight forward and doesn't require large plugins or much messing around with.
This is heavily documented on stack, so do some searching.
https://stackoverflow.com/search?q=php+ajax+jquery+upload+image+with+iframe
Does anyone know of a jQuery-AJAX image uploader, where I can have multiple instances of the form on the same page?
Let me elaborate on my situation! I have a front end page, where a user can change his profile, when the page loads, it loops through all the content-type rows in the database.
I need to apply an image upload form for every type of img.
The problem is, that every plugin I have tried will only allow me to have 1 upload form per page, but I need one for user profile image, one for signature image one for ... as defined by the content elements in the table.
Example:
<form id='upload' method='post' action='script.php?val=profilepic' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
<ul style='display:none'>
<!-- The file uploads will be shown here -->
</ul>
</form>
<form id='upload' method='post' action='script.php?val=sigpic' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
<ul style='display:none'>
<!-- The file uploads will be shown here -->
</ul>
</form>
<form id='upload' method='post' action='script.php?val=homepagepic' enctype='multipart/form-data'>
<div id='drop'>
Drop Here
<a>Browse</a>
<input type='file' name='upl' multiple />
</div>
<input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />
<ul style='display:none'>
<!-- The file uploads will be shown here -->
</ul>
</form>
Below is the picture to get better understanding of my problem:
Any help or advise would be appreciated.
Yes, you could! I would recommend Uploadify script that works very well. It supports multiple file uploads and multiple instances of the uploader.
Example:
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
and
$(function() {
$("#file_upload_2").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
In your case your uploader doesn't work simply because you have multiple ids with the same name on the page. It's invalid. Look at the example about, it represents correct idea that you would have to implement using your code or to use the other script to do it!
Important: User Ray Nicholus comments below that the iframe "trick" mentioned in this answer only works in IE9. For all modern browsers, XHR2 (ajax) requests are used to upload the files.
Not sure if this is what you're looking for:
Multiple file upload plugin with progress-bar, drag-and-drop.
The Widen/fine-uploader AJAX file upload plug-in allows users to upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.
It has been turned into a commercial product: fineuploader.com
Github project is here
I was wondering if anyone knew the best way to dynamically create an upload form?
Here's what I'm trying to achieve: The code shown below allows one upload, I want to have a button that when pressed, should add another form for file upload. So, if I want to upload - let's say 7 files, I want to press the button 7 times to create those upload forms, each on it's own row.
Is there anyway I can do it?
Thanks for your assistance:
<html>
<head>
<title> Multiple File Uploads </title>
</head>
<body>
<form enctype="multipart/form-data" action="uploader.php" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
Usually you do something like this, Client-side:
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
$('#extraUpload').click(function(){
$('.uploadfile:last').clone().appendTo('#uploadContainer');
});
</script>
That is using jQuery. Then on the server side you can easy loop over the $_FILES['uploadfiles'] array:
foreach($_FILES['uploadfiles'] as $file){
//do stuff with $file
}
take a look here for a simple example
http://mohamedshaiful.googlepages.com/add_remove_form.htm
Josh
jQuery has a nice plugin I've used called MultiFile. You may want to check that out.
http://www.fyneworks.com/jquery/multiple-file-upload/
Here's a really really simple one, works in FireFox, Chrome and IE7.
I'd really advise you to check out a javascript framework such as jQuery, it'll make your life easier.
<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
var hook = document.getElementById(hookID);
var el = document.createElement('input');
el.className = 'uploadfile';
el.setAttribute('type','file');
el.setAttribute('name','uploadfiles[]');
hook.appendChild(el);
return false;
}
You could try this jQuery plugin called uploadify
You could try YUI uploader
Just make sure that you handle the file correctly on the server as Flash sometimes posts the data to the server in different ways. So if you have some way of checking what is in the Request values then you should be good.
There is no way to do this with plain HTML currently. I think it is starting to be addressed in the latest versions of browsers and the forthcoming HTML5 spec.
Most current cross browser solutions will require a JS library (and I think Flash). The alternative is selecting each file individually with it's own input element. For obvious reasons browsers implement very strict security around the scripting and display of file upload elements that can make them hard to work with.