I am working on a rudimentary site that enables users to upload images to the server and download them from it. I want to add a "preview" feature that will allow the user to see its photo beforehand. Here is my code:
<div class="container">
<input type="file" class="title3" id="picker"/>
<img src= this.input alt="IDK why, but I can't display that." class="title3">;
You can use JavaScript to dynamically update the image source of the img tag.
const img = document.getElementById('preview');
const input = document.getElementById('picker');
input.onchange = function(ev) {
const file = ev.target.files[0]; // get the file
const blobURL = URL.createObjectURL(file);
img.src = blobURL;
}
<div class="container">
<input type="file" class="title3" id="picker" />
<img id="preview" alt="IDK why, but I can't display that." class="title3" width="200">
</div>
I updated the code.
const selectFile = evt => {
const [file] = evt.target.files;
if (file) {
document.getElementById('preview').src = URL.createObjectURL(file);
}
}
<div class="container">
<input type="file" class="title3" id="picker" onchange="selectFile(event)" />
<img id="preview" alt="IDK why, but I can't display that." class="image">;
</div>
Related
How can I insert URL text from textarea to the image src with this code:
var wpcomment = document.getElementById('previewimage');
wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){
document.getElementById('prevCom').innerHTML = this.value;
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom"><img alt="" id="nahled" src=""></div>
I already asked here: jQuery : how turn link from textarea to image in div?
but there is only jQuery solution with no live preview.
I think there is no need to capture keypress and mouse leave. besides by changing image attribute like below, or image.setAttribute('src', this.value)
var wpcomment = document.getElementById('previewimage');
var image = document.getElementById('nahled');
wpcomment.onkeyup = function(){
image.src = this.value;
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom">
<img alt="" id="nahled" src="" />
</div>
var wpcomment = document.getElementById('previewimage');
wpcomment.onmouseover = wpcomment.onkeyup = wpcomment.onkeypress = function(){
document.getElementById('nahled').src = this.value;
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom"><img alt="" id="nahled" src=""></div>
Here is a version with test and eventListener
const wpcomment = document.getElementById('previewimage');
const image = document.getElementById('nahled');
wpcomment.addEventListener("input", function() {
const str = this.value.trim();
if (str.startsWith("data:")) { // data uri
image.src=str;
return;
}
try {
const url = new URL(str);
// if (url.href.contains(....) ===-1) { /* test extension here */ }
image.src=url.href;
} catch (_) {
console.log("Not a valid URL")
return false;
}
});
#prevCom img {
height: 300px;
}
#prevCom img::before {
content: "ッ";
}
<textarea name="previewimage" id="previewimage" placeholder="drag drop here"></textarea>
<div id="prevCom">
<img alt="" id="nahled" src="" />
</div>
I have an input option and the output of that I am giving to the Avatar editor now it's editing but how can retrieve that cropped image from this AvatarEditor.my code is given below.
<div class="file-upload">
<div class="file-select">
<div class="file-select-button" id="fileName">Choose File</div>
<div class="file-select-name" id="noFile">No file chosen...</div>
<input type="file" name="chooseFile" id="chooseFile" onChange={this.onSelectImage.bind(this)}/>
</div>
</div><br />
<Button onClick={this.onAvatar.bind(this)}>crop</Button>
<AvatarEditor
image={this.state.selectImage}
width={250}
height={250}
border={0}
color={[255, 255, 255, 0.6]} // RGBA
scale={1.2}
rotate={0}
Avatar Width={260}
Avatar Height={260}
ref={(ref) => this.setEditorRef(ref)}
/>
functions:-
onSelectImage(e){
e.preventDefault()
this.setState({imageName:e.target.files[0].name})
this.setState({selectImage:e.target.files[0]})
this.forceUpdate()
}
setEditorRef = (editor) => {
if (editor) {
this.editor = editor;
const img = this.editor.getImageScaledToCanvas().toDataURL();
console.log(img);
}
}
I have tried a lot to find it but I couldn't.
thanks in advance
You can get your cropped image from editor, like this
const img = this.editor.getImageScaledToCanvas();
Or to get a url
const img = this.editor.getImageScaledToCanvas().toDataURL();
form.html
<input type="file" name="img" onchange="previewFile(this)" >
Preview
After It uploads I want to show it in fancybox on click of preview. I add fancybox on existing images but how to add on upload images?
For existing images I use and it works
$("a.fancybox").fancybox();
you can use img tag for the preview of the image
var previewFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
<input type="file" name="img" onchange="previewFile(event)" > <br>
<a class="fancybox"><img id="output" alt="Preview Image" width="300" height="300"/></a>
In my code first div is for showing the image. Second div for uploading ani image and third div will show the preview. I want to display the uploaded image in the first div on button press.
<html>
<body>
<div id="imgspace1" class="container">
<!-- image preview div -->
<div id="image_preview1"><img id="previewing1" src="" /></div>
</div>
<!--image upload part-->
<div>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type='file' onchange="readURL(this);" />
</form>
</div>
<div id="image_edit" class="container">
<img id="image_preview" src="#" alt="Upload Image"/> </div>
<div>
<input id="confirm_button" type="button" value="Confirmn" onclick="('')"/>
</div>
</body>
</html>
If your prime concern is displaying a preview of the image you may use EZDZ
js library.Then you just have to add an image tag and import the .js and .css files and you will be able to see the preview and then upload it by ajax.
function readURL(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#previewing1').attr( "src", e.target.result );
};
FR.readAsDataURL( input.files[0] );
}
}
This code will read the uploaded image in file element.
<script type="text/javascript">
$(document).ready(function(){
$("#confirm_button").click(function{
var preview = $('#image_preview').attr('src');
$("#previewing1").attr("src", preview);
});
});
</script>
You can copy the src of third div image to first div image. And confirm button will be . You can write this unction in javascript also with onclick event.
I need to preview the image before upload.I was able to pass the file path from view to controller,in the controller using memory stream class i am trying to preview the image before saving it to database.Could any one provide me any sample or example for this
Thanks!
<script type="text/javascript">
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<form id="form1">
<input type='file' onchange="readfile(this);" />
<img id="image_preview" src="#" alt="your image" width="200" height="200"/>
</form>
I have created bin also, try using this link http://codebins.com/codes/home/4ldqpc4
Please check below urls
http://weblogs.asp.net/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx
image upload and preview in mvc 2