Is it possible to preview the file that is selected in the input field before taking any actions?
ex.
I will upload a text file so I will select it then before I click the upload button I want to preview the text file in tables or something like that.
As #RichardTheobald mentioned, it isn't possible with PHP to preview a file before it's uploaded, however, with JavaScript it is.
To read a text file before it's uploaded with JavaScript, you'll need to use a FileReader object. You'll be able to get the list of files from the <input type="file"> element and pop each of these into a FileReader. HTML5Rocks has a good article on reading local files which I've adapted to this question in a JSFiddle.
input.addEventListener("change", function(e) {
var file = e.target.files[0];
// Only render plain text files
if (!file.type === "text/plain")
return;
var reader = new FileReader();
// Once the FileReader loads, pop the result into an output element
reader.onload = function(event) {
document.getElementById("output").innerText = event.target.result;
};
reader.readAsText(file);
});
Related
I got a form with file upload fields along with others text field etc., I was thinking to allow user to select their upload files (maximum 3 files), can I achieve it with just share one file input box and display the selected file name under it before submit? can jquery do this? I had found lots of existing jquery library that has such function, but all will uploaded the files in real time before I validate others field and click submit to request ajax process.
Please advise.
I did something like what you maybe need. When you click on the 'select files' and choose some files, it will show you a list of them. I used a jQuery. Here is the code:
<input type="file" id="test" multiple>
<div id="text"></div>
<script type="text/javascript">
$('#test').bind('change', function() {
var files = this.files;
var i = 0;
for(; i < files.length; i++) {
var filename = files[i].name + "<br />";
$("#text").append(filename);
}
});
</script>
I have an input field in which I am inserting value through browse button now i want to copy that value from input field to an src tag so that i can preview the image which user has just uploaded
here is my code
<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');"/>
I want to copy selected value from above input field to
<img src="myimage" />
You just can't directly show it from the user's computer instead you will need to first upload it to your server and then show it. Uploading the file using ajax would create the same effect you want. Also take a look at: FileReader API # MDN
Update: As you have the image already on the server try the code below
Try this code:
HTML:
<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');" />
<img src="myimage" />
JS:
setInterval(react, 5000);
function react() {
document.getElementByTagName("img").src = document.getElementByName("logo").value;
}
Add an id to the img tag and use
var imagepath = $('#logo').val();
$('#myimg').attr('src', imagepath);
inside the function you fire when the input is changed
I got this working with the code below. I like to put the functions on body so that even if the class is added afterwards via AJAX the "change" command will still trigger the event.
My approach does use jQuery.
HTML:
<input class="text-input" class="classhere" type="text" name="logo" id="logo" />
<div class="imagearea"></div>
JS:
$("body").on("change",".classhere",function(){
//Equivalent of getElementById
var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
var file = fileInput.files[0]; //there is only '1' file since they are not multiple type.
var reader = new FileReader();
reader.onload = function(e) {
// Create a new image.
var img = new Image();
img.src = reader.result;
$(".imagearea").html(img);
}
reader.readAsDataURL(file);//attempts to read the file in question.
});
This approach uses the HTML5 File System API's to read the image and put it into a new javascript img object. The key here is readAsDataURL. If you use chrome inspector you will notice the images are stored in base64 encoding.
The reader is Asynchronous, this is why it uses the callback function onload. So make sure any important code that requires the image is inside the onLoad or else you may get unexpected results.
I am using file upload in my current project. When I click browse button, the file will be uploaded automatically and read number of lines and display that details immediately. I finished this task.
But when I will uploaded large size of file it will take some time to upload. So I need to implement file uploading progress bar.
I used the the following example.
http://aryweb.nl/projects/mootools-form-upload/Demos/Upload.html
http://mootools.net/forge/p/form_upload
<script>
window.addEvent('domready', function(){
var upload = new Form.Upload('files', {
onComplete: function(){
alert('Completed uploading the Files');
}
});
if (!upload.isModern()){
// Use something like
}
});
</script>
This script working well.
But when I will click submit button, that time will be displaying progress bar.
I need to change when I will click browse button that time will be display the progress bar. I don't know how to change.
You are using mootools plugin javascript library that allows you to upload files and track the progress. It has little to do with PHP.
Since demo and documentation for it doesn't have progress tracking, if you look closely at https://github.com/arian/mootools-form-upload/blob/master/Source/Form.Upload.js then you'll see that progress doesn't have any callback in it..
onProgress: function(event){
var loaded = event.loaded, total = event.total;
progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');
},
so you need to either
Use suggested HTML it expects (<div class='progress'></div>), OR
Add your custom behaviour by extending options it includes before that
I'm trying to retrieve the image from DB even when clicked on refresh.
Javascript function:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(50)
.height(50);
};
reader.readAsDataURL(input.files[0]);
}
}
Now when i choose the file, i will get a small thumbnail, but when i refresh, there will be no image.
Functionality i'm trying to achieve,
Upload a file, show a preview small. - which is done.
When i refresh it has to be there, since i'm concentrating on only one ID at the moment.
This application is to store,update,delete an image[while previewing all the time in a small thumbnail]. I'm using Normal PHP here, where as the app is in CodeIgniter.
EDIT: All need is to ECHO the last uploaded image src.
You are not saving the file to the server, so when you refresh, you are just blowing away all of the JavaScript variables that are holding the data.
I want to check the file size of the file selected by user, at the client side by using javascript.The code i am using for this is:
<script type="text/javascript">
var myFile = document.getElementById('myfile');
//binds to onchange event of the input field
myFile.addEventListener('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
</script>
But when i run the code, choose a file, nothing happpens.
Any body tell me what i am doing wrong
Your code works fine (in HTML5 browsers with the File API). Make sure that your <script> block is after the <input> element. In that jsfiddle, it's in the "load" handler.
Works for me using jquery:
http://jsfiddle.net/UUdcy/
$('#myfile').change( function() {
var fileInput = $("#myfile")[0];
var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
$('body').append('<p>'+imgbytes+'</p>');
});
You can't get the file size using javascript. Security in the browser prevents file system access by Javascript. You'd need to use Flash, or ActiveX or something that would be able to be granted permissions to do this I believe.
EDIT: If you are using the HTML5 File API then I guess you can do this - but as you've not indicated that anywhere I didn't assume that this was the case. I will put HTML as a tag on your post.