I am trying to implement a message functionality. In this the user is allowed to upload an image. My upload function is working fine. But i want to the preview of the image that the user wants to upload before he actually clicks the submit button. My working code for image input so far is
<input name="attach" type="file" id="attach" />
I have searched a lot and have reached a conclusion that i will have to use java-script or j-query for this i created a onchange="readURL(this);" function and placed it in input. I also created an image tag in which the image will be displayed <img id="preview_img" style="max-width: 130px; max-height: 130px; display: none" src=""/> From here on i am confused. How will i change the image src with java-script or what value will i change it to?
you can put this in some jQuery event ( 'click' , 'load', not sure when you want this to happen):
$('#preview_img').attr('src', '...');
Set the data URI with the image content to the src attribute. As long as you don't have the image uploaded on the server, you can load its content content in the data URI format by FileReader.readAsDataURL in your readURL, where you have access to the selected file either via event.target.files or via the this which you send there in your code.
Have a look at an answer to a similar problem; it accesses the input element by its ID, but you can easily adapt it to consume the element you send to the readURL.
Related
I'm trying to pass the contents of an input file asynchronously. The input control is located within an UpdatePanel control. I can only use the HTML input file control and I do not want to generate the postback. Ok. Is there a way, even using JavaScript? To understand better: in my project I must be able to publish posts (like facebook) that have an image besides the text. Therefore it must take place asynchronously. When the user loads the image, the preview is generated by saving the cached data.
<img id="imgoutput"/>
<input id="upload1" type="file" name="upload1" accept="image/*" onchange="loadFile(event)" />
var loadFile = function (event) {
var output = document.getElementById('imgoutput');
output.src = URL.createObjectURL(event.target.files[0]);
};
Is there a way to somehow manage to recover the file by acting on the cache when I try to publish the post?
Thank you
I was wondering if it's possible to have an HTML form with a text field and a button, wherein you enter a string (say 5) and on pressing the button, the image "image5.jpg", stored on the server, is rendered on the webpage.
I believe it boils down to coding a button "on-click method":
Read a text field and form a filename string for the image
Updating the image, preferably (OR redirecting the user to "http://.../image5.jpg" would do as well)
I'm not terribly familiar with much more than basic HTML, but I can hack it together if I know what will get the job done.
Thanks.
// DOM ready handler
$(function(){
// Click on change image button handler
$('#select').click(function(){
// Get the value entered in the number input
var image = $('#number').val();
// Change the source of the image
$('#image').attr('src', "http://somewebsite.com/image" + image +".jpg");
});
});
JSFiddle: https://jsfiddle.net/0rn00L4a/
There are no real images to show, but if you inspect the DOM you will see it changes the image to things like
<img id="image" src="http://somewebsite.com/image2.jpg">
So if you put in your correct image path, it will just show them immediately when you press the button.
You could just do it on the change event of the input, but that is a little jarring.
SHORT VERSION:
How do I attach an image object from the Document Object Model, using JavaScript, to a form so it can be sent to the server, without the user having to manually attach it using the input type=file tag?
Description:
I need a user to be able to look at a series of pics on a web page that were pulled in as the preview of a link he pasted, choose one, and have it automatically attach to a form, to be sent with text he wrote and processed by existing PHP as part of a new post, exactly as if he'd used an input type="file" interface to attach it.
The problem is that the pic exists in the browser as part of the Document Object Model, and it needs to somehow become an attachment into his form, to submit with his text as a new post. I've tried making a hidden input and making its value equal to the image, but that seems not to work.
The solution can be in jQuery, or hand-coded, I've been using JavaScript for 18 years, so I can understand either one...I just don't know how to attach a DOM object as a file to post to the server and process as part of a form.
Example Code:
This is not the actual code, which is complex and involves using JSON to pull a preview of a URL in PHP and send it back to the user, but it summarizes the problem:
<img id="image[0]" src="images/image0.jpg" onclick="attachimage(0)"/>
<img id="image[1]" src="images/image1.jpg" onclick="attachimage(1)"/>
<img id="image[2]" src="images/image2.jpg" onclick="attachimage(2)"/>
<form method="post">
<input type="text" name="title"/>
<textarea name="description"></textarea>
<input type="hidden" name="theimage" id="theimage">
<input type="submit" name="post" value="save">
</form>
<script>
var attachimage = function(item) {
// So far, nothing like this next line has worked for me,
// the image never shows up in the saved post
$("#theimage").val(document.getElementById("image[" + item + "]"));
}
</script>
CONTEXT:
I am working on a Wordpress website, using BuddyPress, to allow users to post their own links (a-la Digg and Reddit) without having Editor permission and using the Dashboard. I'm using a plugin called BuddyBlog (which uses bp-simple-front-end-post) to let users do this, which works fine...
But the owner also wants a preview to come up when they paste in a URL, just like it does on Facebook. I found nothing that already integrates the two features (user posts AND preview), so I pulled some open source code from the web that takes the URL, sends it via JSON to the server, which grabs the title, description, and images via PHP and sends the results back as a formatted HTML block. I then grab the values of those results and insert them into the BuddyBlog form fields...but BuddyBlog's form anticipates the image coming to it via:
<input type="file" name="bp_simple_post_upload_0">
...and I don't think I can simply set the value of bp_simple_post_upload_0 to be equal to the source of image[0]
If you've already processed the images on the server and created the previews, it means they're already there. So just pass in some variable representing which picture was selected and get the corresponding image. It's already on the server.
If the images are generated dynamically, with canvases or whatnot, you could send a base64 hash of them.
I have an input file with hidden visibility :
<input type="file" id="fileupload" name="upload" style="visibility: hidden;" />
But I want to use it, without showing it. I will trigger the event through a-tag(hyperlink).
There I have:
//that's fine, open file dialog
document.getElementById('fileupload').click();
//can not take the value of file chosen?
var x = document.getElementById('fileupload').value;
console.log(x);
So how can I take the chosen file without displaying the input ? Is this possible?
You only want to display the filename when someone adds a file?
You could add an eventListener to your file to retrieve the filename:
document.getElementById('fileupload').onchange = function(e) {
console.log(e.target.value);
}
But to upload a file you can just add this hidden file field to a form and submit it.
The first question in my mind is why dont you use jQuery, as its easier.
Second, the input will not actually hold the file per se, but a reference to it. The file will be sent via post (or get) and manipulated server side. Maybe I don't understand correctly what you're trying to do.
Normally, a file upload dialog is invoked by clicking the button created by <input type="file"/>. But then, I don't want the text field that comes with it. Is there a way to get rid of the text field? Or is there an alternative way to open the file upload dialog without using <input/>?
Add file input, and set its position to quite far away.
Add a button.
Set buttons onclick to $("#myFile").click();
:D
<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">
<button onclick="$('#myFile').click();">Browse</button>
agree with alex
<style>
.file_wrap{
background:url(file.jpg);
overflow:hidden;
width:30px;
height:10px;
}
.file_wrap input{
opacity:0;
font-size:999px;
cursor:pointer;
}
</style>
<div class="file_wrap">
<input type="file" />
</div>
You can use a flash alternative. I have used swfUpload, with great success. Uploadify, is a similar alternative. Both of these have nice feature sets, including progress bars and multiple upload.
You could replace it with a flash-button as dustin stated or you could hide the button by css-placing your own button on top of the input element and open the select file box by a script.
Some examples here:
inputfile
Check out the http://www.uploadify.com/ jQuery plugin.
You can add your own button and position it under the browse button with CSS.
Then set the file input to have 0 opacity.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (no text input field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
Additionally you can set various restrictions using simple data-attributes or JS settings. e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.