I'm saying apology to ask this repeated Question.
I've tried so many examples for file Uploading finally I wrote the code below.
Once Hyperlink was clicked it is asking file then we select file.
But i want to display the file name in Table , I'm unable to show on table.
<div class="sf_coursehead">
Upload FileList + Add New
<input type="file" id="upload_input" name="courseAgenda" style="font-size: 50px;
width: 120px; opacity: 0; filter: alpha(opacity :0); position: relative; top: -40px;; left: -20px" />
</div>
<table>
<tr>
<td><td>
</tr>
</table>
But how to show selected files in table,that means each selection table will be add new row
So please help me to display file name in table,
give me suggestion.
Edit:
this is also not working..
$("#upload_input").change(function(){
var filename = document.getElementById('id_transactions').val();
alert(filename);
});
This is my Working Code..
<img src="resources/images/profile_image.png" alt="Profile Image"
width="120" height="150" class="prif_img" />
NewImage
<input type="file" id="upload_input" name="courseAgenda"
style="font-size: 50px; width: 120px; opacity: 0; filter: alpha(opacity : 0); position: relative; top: -40px;; left: -20px" onchange="uploadFile_onChange(this);" />
Script:
function uploadFile_onChange(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.prif_img').attr('src', e.target.result).width(120).height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
this code may what you need,
<script>
$(document).ready(function() {
$("#upload_input").change(function() {
var file_name=$("#upload_input").val();
$("#list_files").append("`<tr><td>`"+file_name+"`</td></tr>`');
}); });
</script>
</head> <body>
<table id="list_files"> </table>
Related
I'm trying to upload a second img to the cropper that populates the second .img-result. The cropper should populae whatever was uploaded, and then when the save btn is pressed, the .img-result is updated.
I added the attribute data-up but I'm not sure how to call it in the JS.
// vars
var result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
upload = document.querySelector('.file'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', function(e) {
if (e.target.files.length) {
// start file reader
var reader = new FileReader();
reader.onload = function(e) {
if (e.target.result) {
// create new image
var img = document.createElement('img');
img.id = 'image';
img.src = e.target.result;
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
var imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// show image cropped
cropped.src = imgSrc;
});
.img-result {
border: 2px solid;
width: 50px;
height: 50px;
}
.img-result img {
max-height: 100%;
max-width: 100%;
}
.page {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.result {
display: flex;
}
.box {
padding: 0.5em;
width: 100%;
margin: 0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.img-w {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="page">
<div class="box">
<div class="options">
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<button class="btn save">Save</button>
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="1">
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="2">
</div>
<div class="box-2">
<div class="result"></div>
</div>
<div class="result">
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="1">
</div>
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="2">
</div>
</div>
</main>
First of all, as I mentioned in comments. Id must be for each element of your DOM. So, you better change id="file-input" to id="file-input1" and so on.
And It looks like you want to get the attribute value data-up when save function called,
You can do that in this way
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
document.getElementById('file-input1).getAttribute('data-up')
....
Hi i want to implement image cropper on my page. I found some code from Codepen.I used the same code but the code is not working and it shows the below error
angular.module('app', ['uiCropper'])
.controller('Ctrl', function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
});
.cropArea {
background: #E4E4E4;
overflow: hidden;
font-size: 0px;
line-height: 0px;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<table ng-app="app" ng-controller="Ctrl">
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
<td>
<div class="cropArea"><div ng-hide="myCroppedImage">Select an image file: <input type="file" id="fileInput" /></div>
<ui-cropper image="myImage" area-type="circle" chargement="'Loading'" result-image="myCroppedImage" canvas-scalemode="true"></ui-cropper>
</div>
</td>
</table
You need to refer the javascript , which you have not done with your code,
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"> </script>
That is because you are not injecting the uiCropper js file in index.html. You have to include uiCropper js in index.html. Add this file t index.html and check.
<script src="http://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"></script>
The HTML code for image file input:
<input type="file" autocomplete="off" name="background-image" accept="image/*" />
The destination div block where I want to dynamically set the background image:
<div class="clock"></div>
The jQuery function I'm currently using for setting image file uploaded as div background image:
$(".background>div>input[type=file]").change(function () {
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
}
else {
$(".clock").css("background-image",'url("' + $(".background>div>input[type=file]").val() + '")');
}
});
The issue is that the background-image is not being set. This may possibly be because when I checked with browser inspector, the file upload is not containing file url.
Note: The background-color of .clock is set to white initially.Also I'd not like to use a server since my intention is to keep it as client side only application.
This may solve your problem
JS FIDDLE
HTML
<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>
CSS
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
PURE JAVASCRIPT
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
It's small way to do this without using FileReader.
http://jsfiddle.net/PuneetChawla/vqn7r0nj/
HTML
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id='clock'></div>
CSS
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
JavaScript
function readURL(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
$('#clock').css('background-image', 'url(' + getImagePath + ')');
}
Explanation - The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter.
var loadFile = function(event) {
var output = document.getElementById('output');
output.style.backgroundImage= "url("+URL.createObjectURL(event.target.files[0])+")";
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<div style="width: 500px;height: 500px;" id="output"></div>
</body>
</html>
I have a Fiddle here...
I've accomplished the ability to get an image to load below the upload button, however, how can I upload multiple images to the same page? There are three places where I've allowed the user to upload a specific image.
<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
<label class="title" style="font-weight: bold;">Add an image to the left of the Accreditation text<br>(Image will be resized to 100px by 100px)</label>
<label class="medium" >
<input type='file' onchange="readURL(this);" />
</label>
<p><strong>(Image will display below)</strong></p>
<div style="max-width: 100px; height: auto; border:1px dashed black;">
<img id="accred_image" src="accred" alt="" />
</div>
</div>
And add an image to this area...
<div class="element-file" title="Do you want to add an image to the Accreditation Text?">
<label class="title" style="font-weight: bold;">Would you like to add a logo image?</label>
<label class="medium" >
<input type='file' onchange="readURL(this);" />
</label>
<p><strong>(Image will display below)</strong></p>
<div style="max-width: 140px; height: auto; border:1px dashed black;">
<img id="blah" src="" alt="" />
</div>
</div>
This is my javascript, but when I upload an image, it places the same image in both spots. I thought this had something to do with the class I am uploading from, but creating the new class, doesn't seem to help at all.
$("input").change(function(e) {
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
$('#accred_image').attr('src', reader.result);
}
reader.readAsDataURL(file); }
});
You need to find that is the img to update.
Try this:
$("input").change(function(e) {
var elemIMG = $(this).parent().parent().find('img'); // find the img to update
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var reader = new FileReader();
reader.onloadend = function() {
elemIMG.attr('src',reader.result); // update the img src
}
reader.readAsDataURL(file); }
});
I'm trying to code a custom upload button. I've hidden the regular one and then put a div with image background over the top.
It works great but I want to fill the (disabled) input field below with the file name once the user selects a file but it's not working.
JavaScript:
document.getElementById("upload_button").onchange = function () {
document.getElementById("upload_file").value = this.value;
};
HTML:
<div id="Form_FileInput_Container"><input type="file" id="upload_button" /></div>
<input class="Form_Input" id="upload_file" placeholder="Choose File" disabled="disabled" />
CSS:
#Form_FileInput_Container { position: relative; width: 100px; height: 100px; background: #e5e5e5 url('path/to/upload/image/forms_upload.png') no-repeat; border: 1px solid #cccccc; }
#Form_FileInput_Container input { filter: alpha(opacity=0); opacity: 0; width: 100px; height: 100px; }
Any help is most appreciated :)
Make sure you attach your JavaScript after the elements exist.
<input id="foo" type="file" />
<input id="bar" type="text" placeholder="Choose File" disabled />
// after elements exist
var foo = document.getElementById('foo'),
bar = document.getElementById('bar');
foo.addEventListener('change', function () {
var slash = this.value.lastIndexOf('\\');
bar.value = this.value.slice(slash + 1);
});
DEMO
HTML:
<input type="file" id="upload_button" onchange="cutomButton()" />
JS:
function customButton() {
var z=document.getElementById("upload_button").value;
document.getElementById("upload_file").value = z;
alert(document.getElementById("upload_file").value);
}