I have form with 4 inputs to load a images and preview them. The script below work but only for first input
<input type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="previewFile(event);" value="img/<?echo $row['zdjecie'];?>" style='display: none;'/>
function previewFile() {
const preview = document.getElementById('img-new-1');
const file = document.getElementById('images-upload-1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function ()
{
// convert image file to base64 string
preview.src = reader.result;
}, false);
if (file)
{
reader.readAsDataURL(file);
}
};
any suggestion?
I changed your code around:
I added a data-img to each file input so that it would be tied to an img by it's id. Then I updated the preview function to use the event passed e to use the input that was changed and not referring directly to a single ID.
function previewFile(e) {
const preview = document.querySelector(e.target.dataset.img);
const file = e.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", function ()
{
// convert image file to base64 string
preview.src = reader.result;
}, false);
if (file)
{
reader.readAsDataURL(file);
}
};
<input data-img="#img-new-1" type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="previewFile(event);" value="img/"/>
<input data-img="#img-new-2" type="file" id="images-upload-input-2" accept=".png, .jpg, .jpeg" name="image_2" onchange="previewFile(event);" value="img/"/>
<img id="img-new-1">
<img id="img-new-2">
Related
I'm trying to input the hash into the ipfs inner html and then also the ipfs href
<script src="https://cdn.jsdelivr.net/npm/ipfs-core/dist/index.min.js"></script>
<script>
async function saveFile(file) {
const node = await window.IpfsCore.create();
await node.add(file);
}
function receivedText() {
document.getElementById('ipfs').appendChild(document.createTextNode(fr.result));
}
function readfichier(e) {
if(window.FileReader) {
var file = e.target.files[0];
var reader = new FileReader();
if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
}
reader.onloadend = function (e) {
}
console.log(file);
document.getElementById('fileNameOutput').innerHTML = document.getElementById('fileName').value;
document.getElementById('ipfs').innerHTML = saveFile(file);
}
}
function clickme() {
$('file').ready(function(){ const file = $('file').prop('files')});
var fr = new FileReader();
fr.onload = receivedText;
document.getElementById('file').addEventListener('change', readfichier, false);
//fr.readAsText(file);
//fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
}
</script>
<h1>Upload file to IPFS</h1>
<form id=form enctype="multipart/form-data">
<label>FileName</label>
<input id=fileName type="text" name="fileName">
<br><br>
<label>Upload file</label>
<input id=file type="file" name="file">
<br><br>
<div id=submit onclick="clickme();">Submit</div>
</form>
<h1>Here's your file, on the blockchain</h1>
<p>Name: <div id=fileNameOutput placeholder=FileName></div></p>
<p>Link: <a id=ipfs href="https://ipfs.io/ipfs/"></a></p>
it has to wait until the document loads, to add a click on the button to add the event listener for the file loading.
I'm getting close and it's taken me hours to get here, trying ipfs mini and ipfs http client and trying to do it on the back end. Hopefully i can get all versions working so there's a back up.
This is effectively a save point in my work for me. Thank you for reading and helping if you can
I am trying to use image preview before upload.Its working fine while creating new.but how to retrieve that image that has already saved in edit form and can be change when i try to change another image ? This is my input type for file.
<input type="file" class="form-control" name="image" id="image">
<img id="user_image" src="{asset('admin/images/user/'.auth()->user()->image)}}" />
This is my script file to preview image before uploading
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
#php $value=auth()->user()->image; #endphp
$('#user_image').show();
$('#user_image').attr('src', e.target.result).slideDown();;
};
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function() {
readURL(this);
});
</script>
i made a button that takes an image as an input but i cant find a way to show the picture.
i have tried to make an empty element and then change its URL like i saw on a different website but it didnt work.
HTML
<input
id="myImage"
class="photo-upload"
type="file"
accept="image/*, image/jpeg">
<img id="the-picture" width="200" />
JavaScripts
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener("click", displayPicture);
function displayPicture(event) {
let image = document.getElementById("myImage");
image.src = URL.createObjectURL(event.target.files[0]);
};
There were some fixes required in the code, the file has to be read and the URL should be created, here is the working snippet for the code.
const uploadPictureButton = document.querySelector(".photo-upload");
uploadPictureButton.addEventListener('change', function () {
displayPicture(this);
});
function displayPicture(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('the-picture').setAttribute('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
<input
id="myImage"
class="photo-upload"
type="file"
accept="image/*, image/jpeg">
<img id="the-picture" width="200" />
You can use innerHTML for display an image also.
Try this one out, it works for me
<img height="100" width="100" alt="avatar" id="imgPreview> <input type="file" onchange="document.querySelector("#imgPreview").src = window.URL.createObjectURL(this.files[0])">
In this snippet onsubmit is used to display the image uploaded and to keep it visible return false; is used.
<form method="POST" enctype="multipart/form-data" onsubmit="display();return false;">
<input type="file" name="file" id="file">
<input type="submit" value="Upload">
</form>
JavaScript:
function display() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
// it's onload event and you forgot (parameters)
reader.onload = function(e) {
// the result image data
document.getElementById("img").src = e.target.result;
}
// you have to declare the file loading
reader.readAsDataURL(file);
}
When doing so, the image loads and is displayed but does not upload to the directory of uploads specified.
How can I upload the actual images and show the image without the need of page refresh?
Rather than changing the img after submission or manipulating a submit button I found that it's better to just use this:
<input type="file" name="file" id="file" onchange="preview_image(event)">
And then in js simply read it onchange
function preview_image(event) {
var reader = new FileReader();
reader.onload = function() {
document.getElementById('img').src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
I am uploading image with ajax and showing image before uploading with jquery.
here is my html code
<form id="uploadimageS2" action="" method="post" enctype="multipart/form-data">
<div id="image_previewS2"><img id="previewingS2" src="img/noimage.png" /></div>
<div id="selectImageS2">
<label>Select Your Image</label><br/>
<input type="file" name="fileS2" id="fileS2" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
then here is my jquery code
// Function to preview image
$("#fileS2").change(function() {
$("#messageS2").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewingS2').attr('src','img/noimage.png');
$("#messageS2").html("<p id='errormsg'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
function imageIsLoaded(e) {
$('#image_previewS2').css("display", "block");
$('#previewingS2').attr('src', e.target.result);
$('#previewingS2').attr('width', '250px');
$('#previewingS2').attr('height', '230px');
};
reader.readAsDataURL(this.files[0]);
var file = this.files[0];
here i want to add another element instead of "this". because i am uploading 3 images in one page and when using this script it is going wired.
i already tried
reader.readAsDataURL($(#uploadimageS2).files[0]);
reader.readAsDataURL($(#fileS2).files[0]);
and those didn't work.