This my script and html. I want that i will preview image before uploading. I tried whole day for searching from internet and found this script on every page. But it is not working on my project.
Need Solution.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function showimagepreview(input) {
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
$('#Image1').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<asp:FileUpload ID="mcq1" runat="server" onchange="showimagepreview(this)" />
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<asp:Image ID="Image1" runat="server" CssClass="Imgstyle"/>
</div>
</div>
Here, I hope it can help you.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
$('.previewimg').show();
}
reader.readAsDataURL(input.files[0]);
}
}
$("#uploadImg").change(function(){
readURL(this);
});
.previewimg {
background: #ffff33;
width: 500px;
height: auto;
padding: 20px;
border-radius: 20px;
display: none;
}
.previewimg img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="uploadImg" />
</form>
<div class="previewimg">
<img id="preview" src="#" alt="your image" />
</div>
Related
I am working on a project in which I want to implement croppie js with modal. For that i found a codepen which suits my requirement. But the problem is that after performing crop the resulted image is black.
Can anyone help me with this. The link of the codepen is provided below: https://codepen.io/asrulnurrahim/pen/WOyzxy
// Start upload preview image
$(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 150,
height: 200,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 150, height: 200}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
label.cabinet{
display: block;
cursor: pointer;
}
label.cabinet input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
margin-top:-30px;
}
#upload-demo{
width: 250px;
height: 250px;
padding-bottom:25px;
}
figure figcaption {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding-left: 9px;
padding-bottom: 5px;
text-shadow: 0 0 10px #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://foliotek.github.io/Croppie/croppie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://foliotek.github.io/Croppie/croppie.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<label class="cabinet center-block">
<figure>
<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
<figcaption><i class="fa fa-camera"></i></figcaption>
</figure>
<input type="file" class="item-img file center-block" name="file_photo"/>
</label>
</div>
</div>
</div>
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
<?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4>
</div>
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
I'm using the tooltipster plugin to create a tooltip. And I would like to run this function in the content:
Function:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
But since, content should be string, how could I possibly run this function for content?
Here's my setup for Tooltipster. I would like to apply the function to the form.
Content:
const imageTooltipTemplate =
`<div><h4>Put new image URL:</h4>
<div class="se-tooltip-content">
<p><b>Notice: </b>not in all cases the image will be in the same size as the original image</p>
<input class="tooltip-content"></input>
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<div class="se-action-container">
<button class="cancel-button se-btn">
<div>Cancel</div>
<div class="small-text-btn">(or ESC key)</div>
</button>
<button class="ok-button se-btn">OK</button>
</div>
</div>
</div>`;
Switch:
const getTooltip = (prop) => {
switch (prop.toLowerCase()) {
case 'img':
return imageTooltipTemplate;
....
Tooltipster:
let template = getTooltip(this.type);
this.$element
.tooltipster({
interactive: true,
trigger: 'custom',
triggerClose: {
click: true,
},
content: $(template),
})
.tooltipster('open');
Done.
I just need to add
const imageTooltipTemplate =
`<div><h4>Put new image URL:</h4>
<div class="se-tooltip-content">
<p><b>Notice: </b>not in all cases the image will be in the same size as the original image</p>
<input class="tooltip-content"></input>
<form runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<div class="se-action-container">
<button class="cancel-button se-btn">
<div>Cancel</div>
<div class="small-text-btn">(or ESC key)</div>
</button>
<button class="ok-button se-btn">OK</button>
</div>
</div>
</div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
`;
This is a profile picture issue. When I set an image for the first it's working fine and when I'm trying to select an image for the second time but i didn't select it and cancel it after all process it doesn't show image in the final outcomes/output.
<!--HTML-->
<div class="modal-body">
<div class="row" style="padding-top: 4em; min-width: 1000px; max-width: 1200px;">
<div class="col s4" style="height:100%">
<div class="row row-zero grey lighten-3" style="margin-top: 50px; padding:10px; width: 300px; ">
<div class="row row-zero" style="border: 1px solid rgba(50,50,50,0.5); padding:10px;">
<label for="create-group-pic">
<span id="group-image-holder" >
<img id="group-image-uploader" class="image-circle" alt="" src="https://s3.ap-south-1.amazonaws.com/airitdata/default/ic_default_group_pic.png" style="padding:25px 5px; width:100%; height:300px;">
</span>
</label>
<input id="create-group-pic" name="profile_pic" type="file" accept="image/*,capture=camera" style="width:1px; height:1px; display:none;">
<span class="col s12 grey lighten-2" style="text-align: center; padding:10px;">Group Profile Picture</span>
</div>
</div>
</div>
var img1;
$("#create-group-pic").on('change', function() { if($(this)[0].files.length!=null){ img1=this.value; // console.log(img1) if (typeof (FileReader) != "undefined") {
var image_holder = $("#group-image-holder"); image_holder.empty();
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src" : e.target.result,
"class" : "image-circle",
"id" : "group-image-uploader",
"style" : "width: 99%; height: 300px; overflow:hidden;"
}).appendTo(image_holder); }
image_holder.show(); reader.readAsDataURL($(this)[0].files[0]); } else {
alert("Your browser doesn't support file upload. Please update your browser. FileReader not supported.."); } } else{
var img= $('#group-image-uploader img').attr('src',img1);
console.log(img);
} });
So I'm trying to implement a preview button so that when my users clicks on the upload button image they could have a preview but the thing is that it is not working, I wonder why ?? A brief description : I have a js function that creates new elements and append it to a p tag date. It is in this function that is going to create the preview image code
// code for creating new elements
function createElements(){
const userQuestions = document.querySelector('#userQuestions');
userQuestions.insertAdjacentHTML(
'beforeend', '<div class="uploader" onclick="$(\'#filePhoto\').click()"><p id="bg-text">No image</p></div><input type="file" name="userprofile_picture" id="filePhoto" style="display:block;width:185px;" /></center><div class="grid-container">'
);
}
///Code to preview image
function handleImage(e) {
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
var reader = new FileReader();
reader.onload = function (event) {
$('.uploader').html( '<img width="300px" height="350px" src="'+event.target.result+'"/>' );
}
reader.readAsDataURL(e.target.files[0]);
}
.uploader {width:50%;height:35%;background:#f3f3f3;border:2px dashed #0091ea;}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<button type="button" onclick="createElements()">add elements</button>
</body>
</html>
If you run the snippet above you can see that the button is woeking but the preview is not showing. Could someone help me?
HTML:
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>Company Logo</label>
<input type="file" class="form-control" value="" name="companyLogo" id="companyLogo" accept="image/*" />
</div>
</div>
<div id="displayImage">
<img id="imgData" src="#" alt="your image" height="150px" width="150px" />
</div>
</div>
JavaScript:
$("#companyLogo").change(function(e) {
if(e.target.value === "") {
$("#displayImage").hide();
} else {
$("#displayImage").show();
}
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#imgData").attr("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Short n simple
No need to create an element on click.
Just add an image tag and set a default image like no image selected or something like that.
The following code will help you
<input type="file" name="myCutomfile" id="myCutomfile"/>
<img id="customTargetImg" src="default.jpg" width="400" height="250">
$("#myCutomfile").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#customTargetImg').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
Take advantage of jQuery -- particularly using
event handlers
delegated event handlers for dynamically-created elements
tree traversal methods.
$(function() {
var userQuestions = $('#userQuestions');
// create onclick event handler for your button
$('#addElements').click(function() {
// IDs must be unique - since you can have an arbitrary number of filePhoto, use a class instead
userQuestions.append(
'<div class="uploader"><p id="bg-text">No image</p></div><input type="file" name="userprofile_picture" class="filePhoto" /><div class="grid-container"></div>'
);
});
// create delegated onclick event handler for your .uploader
userQuestions.on('click', '.uploader', function() {
// you only want to target the file input immediately after it
$(this).next('[type=file]').click();
});
// create delegated onchange event handler for your .filePhoto
userQuestions.on('change', '.filePhoto', function() {
// find related uploader
var uploader = $(this).prev('.uploader');
// check file was given
if (this.files && this.files.length) {
var reader = new FileReader();
reader.onload = function(event) {
uploader.html('<img width="300px" height="350px" src="' + event.target.result + '"/>');
}
reader.readAsDataURL(this.files[0]);
}
});
});
.uploader {
width: 50%;
height: 35%;
background: #f3f3f3;
border: 2px dashed #0091ea;
}
.filePhoto {
display: block;
width: 185px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<!-- added ID attribute -->
<button type="button" id="addElements">add elements</button>
</body>
</html>
Edit
This answer is a non-jQuery solution based off your comment.
// code for creating new elements
function createElements() {
// no need to document.querySelector if the selector is an ID
const userQuestions = document.getElementById('userQuestions');
// you want to use onclick/onchange attributes here as they are dynamically created
userQuestions.insertAdjacentHTML(
'beforeend', '<div class="uploader" onclick="selectFile(this)"><p id="bg-text">No image</p></div><input type="file" name="userprofile_picture" onchange="handleImage(this)" />'
);
}
// trigger click on file input that follows the uploader
function selectFile(uploader) {
uploader.nextSibling.click();
}
///Code to preview image
function handleImage(input) {
if (input.files.length) {
var reader = new FileReader();
reader.onload = function(e) {
input.previousSibling.innerHTML =
'<img width="300px" height="350px" src="' + e.target.result + '"/>';
}
reader.readAsDataURL(input.files[0]);
}
}
.uploader {
width: 50%;
height: 35%;
background: #f3f3f3;
border: 2px dashed #0091ea;
}
.filePhoto {
display: block;
width: 185px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<button type="button" onclick="createElements()">add elements</button>
</body>
</html>
I want to up load image using fileupload and preview the selected image before submit, but it can only work in firefox and IE6. I want to work in IE 7 8 and chrome, also it should work in firefox
<style type="text/css">
#newPreview
{
filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 136px;
height: 134px;
margin-left: 1px;
}
</style>
<script language="javascript" type="text/javascript">
function PreviewImg(imgFile) {
var newPreview = document.getElementById("newPreview");
var src;
if (document.all) {
newPreview.innerHTML = "<img src=\"file:///" + imgFile.value + "\" width=\"130px\">";
}
else {
newPreview.innerHTML = "<img src=\"" + imgFile.files.item(0).getAsDataURL() + "\" width=\"130px\">";
}
}
<form id="form1" runat="Server" method="post" enctype="multipart/form-data">
<div id="newPreview">
<asp:FileUpload ID="file" runat="server" size="20" Width="129px"
onchange="PreviewImg(this)"/>
Try like below.. Its working in FireFox and Chrome
It will help you...
CSS :
<style>
#imgPreview
{
filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 136px;
height: 134px;
margin-left: 1px;
}
</style>
Script:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PreviewImg(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgPreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
HTML :
<asp:FileUpload ID="file" runat="server" size="20" Width="258px"
onchange="PreviewImg(this)"/>
<img id="imgPreview" src="#"/>