HTML Code:
<input type="file" name="img1" id="img1" required>
<input type="file" name="img2" id="img2">
<input type="file" name="img3" id="img3">
<input type="file" name="img4" id="img4">
jQuery Code:
for(var i = 1; i <= 4; i++){
if($("#img"+i).val() != ''){
file = document.getElementById('img' + i).files[0];
fileread(file);
}
}
function fileread(file){
var result = '';
reader = new FileReader();
reader.onload = function(){
result = reader.result;
//return result;
localStorage.setItem("lostimage1", result);
}
reader.readAsDataURL(file);
}
I want to read multiple files when user click on submit button. but it not working. How can I resolve this error? please help me.
Using Jquery and each() method I suggest this:
var checkValue;
var valueArray=[];
$('#button').on('click',function(){
$('input').each(function(){
checkValue=$(this).val();
if(checkValue===''){
return;
}
valueArray.push(checkValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="img1" id="img1" required>
<input type="file" name="img2" id="img2">
<input type="file" name="img3" id="img3">
<input type="file" name="img4" id="img4">
<button id="button">Click Me</button>
Attach click event to <input type="submit">, call event.preventDefault() to prevent <form> submission, use .each() to iterate <input type="file"> elements, pass this.files[0] to readfile function.
Adjust within FileReader load handler to not overwrite same key at localStorage.
FileReader throws an error if a Blob or File object is not passed as parameter to .readAsDataURL(), for example, ifis clicked andfilereadis called in loop and one ofelements.filesproperty doe not containFileobject inFileList. Check if element.fileshas.lengthgreater than0before callingfilereadreferencing the.files[0]property of the current` element.
$(function() {
function fileread(file, id) {
var reader = new FileReader();
reader.onload = function() {
localStorage.setItem("lostimage" + id, reader.result);
}
reader.readAsDataURL(file);
}
$("input[type=submit]").on("click", function(e) {
e.preventDefault();
$(":file[id^=img]").each(function() {
if (this.files.length) fileread(this.files[0], this.id.replace(/\D/g, ""))
})
});
});
plnkr http://plnkr.co/edit/1Sec8uWlK2pbXMTlfpCj?p=preview
Related
Right now I have a url that displays an image when it's loaded. However, there will be an option for this image to be replaced via a form input. I would like the uploaded image to be displayed as soon as it's uploaded so it can be evaluated by the user.
I'm trying to accomplish this via jQuery, but I can't get it to work.
Here's my code:
HTML:
<div class="form-group">
<label for="Image">Image</label>
<input type="file" id="Image" name="Image" accept="image/*">
<img src="..\{{ workshop_info[4] }}" id="output">
</div>
JQuery:
<script>
$(document).ready(function() {
$("#Image").change(function(e){
$("#output").attr("src", e.target.files[0]);
});
});
</script>
You can do this by using FileReader functionality.
I have recreated your example which displays an image when it's loaded
Once i upload my own image by clicking choose file and selected the file. That file will be getting previewed after selection with that image load_images div i created.
As soon as the file is selected i am replace the src of your existing image to the new src which come from readAsDataURL
You can read more about FileReader here in detail.
Working Demo: https://jsfiddle.net/usmanmunir/w5cbgLsk/
Run snippet below to see it working.
$(function() {
//Preview image function
var previewImage = function(image) {
if (image.files) {
//Check all images
var filesAmount = image.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
//Replace images on form upload selected image
$('#output').attr('src', event.target.result)
}
reader.readAsDataURL(image.files[i]);
}
}
};
//Select image and call imagePreview function
$('#Image').on('change', function() {
previewImage(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="Image">Image</label>
<input type="file" id="Image" name="Image" accept="image/*">
<div class="load_images">
<img src="http://mandarinazul.co/images/mandarinas.png" id="output">
</div>
</div>
<img src="../yourimage/path/image.jpeg" onclick="previmg()" id="displayimage" />
<input type="file" class="form-control" onchange="selectedimg(this)" id="selectphoto" style="display: none" name="photo">
</div>
function previmg(){
document.querySelector('#selectphoto').click();
}
function selectedimg(e){
if(e.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.querySelector('#displayimage').setAttribute('src', e.target.result);
}
reader.readAsDataURL(e.files[0]);
}}
OR you can try this too,
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="image has to be load">
function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}}
try this, both will work charm if any doubt feel free to ask.:-)
Can you please take a look at this snippet and let me know why I am not able to target the closest image element to file input
$('.file').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
$(this).closest('.img').attr('src', ev2.target.result);
$(this).find('.img').attr('src', ev2.target.result);
$(this).next('.img').attr('src', ev2.target.result);
};
fr.readAsDataURL(f);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />
As you can see I already tried
$(this).closest('.img').attr('src', ev2.target.result);
$(this).find('.img').attr('src', ev2.target.result);
$(this).next('.img').attr('src', ev2.target.result);
but it is not doing the job
you have to find img closest to the input file which changes, so you must use ev.target because inside the second function scope changes and this does not refer to file input anymore, something like this seems to work:
$('.file').on('change', function(ev) {
var f = ev.target.files[0];
var fr = new FileReader();
fr.onload = function(ev2) {
$(ev.target).next('.img').attr('src', ev2.target.result);
};
fr.readAsDataURL(f);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" class="file" name="image" />
<img class="img" />
<input type="file" class="file" name="image" />
<img class="img" />
I create script for show image until upload , how i use 5 input files for upload , the script must let show one image , or preview image for each input file
The Script :
<script>
function handleFileSelect(evt,ids) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('list'+ids).innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
///alert("ok"+ids);
};
})(f);
reader.readAsDataURL(f);
}
</script>
HTML CODE
<input type="file" id="files2" />
<output id="list2"></output>
CALLING SCRIPT FOR THIS INPUT FILE ID
<script>
document.getElementById('files2').addEventListener('change', function(){handleFileSelect('','2');},false);
</script>
As you can see i try send vars from handleFileSelect('','2') , but don´t works never and i think the code it´s well , but sure i forget something , i hope here can help me in this issue , thank´s community
The Best Regards
Try this code
$(function () {
var _URL = window.URL || window.webkitURL;
$(".UploadImage").on("change", function () {
var preview = $(this).attr("data-img");
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
document.getElementById(preview).src = _URL.createObjectURL(file);
};
img.src = _URL.createObjectURL(file);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="file" data-img="preview1" class="UploadImage" />
<img src="" id="preview1"/>
</div>
<div>
<input type="file" data-img="preview2" class="UploadImage" />
<img src="" id="preview2"/>
</div>
<div>
<input type="file" data-img="preview3" class="UploadImage" />
<img src="" id="preview3"/>
</div>
<div>
<input type="file" data-img="preview4" class="UploadImage" />
<img src="" id="preview4"/>
</div>
It's better if you use CreateObjectURL instead (saves more memory/cpu) it's also faster
var wrapper = document.getElementById('files')
var URL = window.URL || window.webkitURL;
wrapper.addEventListener('change', function(evt){
var input = evt.target
if (input.matches('input[type="file"]') && (input.files || [])[0]) {
var img = new Image
img.width = 50
img.onload = function() {
var output = document.getElementById(input.dataset.for)
output.appendChild(this)
}
img.onerror = function(){
console.log("You uploaded something that is not an image")
}
img.src = URL.createObjectURL(input.files[0])
}
})
output {
display: block;
}
<div id="files">
<!-- Recomend adding accept attribute so you only get images -->
<!-- just made one example -->
<input type="file" data-for="list1" accept="image/*">
<output id="list1"></output>
<input type="file" data-for="list2">
<output id="list2"></output>
<input type="file" data-for="list3">
<output id="list3"></output>
<input type="file" data-for="list4">
<output id="list4"></output>
</div>
In my code I want to accept only image file.otherwise it will not accept and will give alert that its not image file.
I have done below code in jsfiddle:--
jsfiddle link
but the problem is it..It is not giving any message.what am I doing wrong?
https://jsfiddle.net/weufx7dy/2/
You forgot to add id on file element
<input type="file" id="file" name="fileUpload" size="50" />
You had used
var image =document.getElementById("file").value;
but forgot to give id to file control so give that
<input type="file" name="fileUpload" id="file" size="50" />
and try following code in w3schools tryit browser and use onClick event on submit button instead of onSubmit
<!DOCTYPE html>
<html>
<body>
<div align="center">
<form:form modelAttribute="profilePic" method="POST"enctype="multipart/form-data" action="/SpringMvc/addImage">
<input type="file" name="fileUpload" id="file" size="50" />
<input type="submit" value="Add Picture" onClick="Validate();"/>
</form:form>
</div>
<script>
function Validate(){
var image =document.getElementById("file").value;
if(image!=''){
var checkimg = image.toLowerCase();
if (!checkimg.match(/(\.jpg|\.png|\.JPG|\.PNG|\.gif|\.GIF|\.jpeg|\.JPEG)$/)){
alert("Please enter Image File Extensions .jpg,.png,.jpeg,.gif");
document.getElementById("file").focus();
return false;
}
}
return true;
}
</script>
</body>
</html>
Use this :
userfile.addEventListener('change', checkFileimg, false);
function checkFileimg(e) {
var file_list = e.target.files;
for (var i = 0, file; file = file_list[i]; i++) {
var sFileName = file.name;
var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1].toLowerCase();
var iFileSize = file.size;
var iConvert = (file.size / 10485760).toFixed(2);
if (!(sFileExtension === "jpg")) {
txt = "File type : " + sFileExtension + "\n\n";
txt += "Please make sure your file is in jpg format.\n\n";
alert(txt);
document.getElementById('userfile').value='';
}
}
}
I want to show multiple files or images after browse from system not uploaded on server can we show this using jquery?
I goggled it and find there is way to show and upload on server:
http://www.dropzonejs.com/
But. I only want to show images or file in this there is drag and drop functionality also present can we use this plugin.
But, when I use this plugin in fiddle it show only attached file name not display image why?
Here is fiddle:
http://jsfiddle.net/my50a3uh/1/
<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
<input type="file" name="file" />
I hope it may be useful for you.It is running well.
Live Working Demo
HTML Code:
<form enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
<label for="fileToUpload">Select Files to Upload</label><br />
<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
<output id="filesInfo"></output>
</div>
<div class="row">
<input type="submit" value="Upload" />
</div>
</form>
JS Code
function fileSelect(evt) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var files = evt.target.files;
var result = '';
var file;
for (var i = 0; file = files[i]; i++) {
// if the file is not an image, continue
if (!file.type.match('image.*')) {
continue;
}
reader = new FileReader();
reader.onload = (function (tFile) {
return function (evt) {
var div = document.createElement('div');
div.innerHTML = '<img style="width: 90px;" src="' + evt.target.result + '" />';
document.getElementById('filesInfo').appendChild(div);
};
}(file));
reader.readAsDataURL(file);
}
} else {
alert('The File APIs are not fully supported in this browser.');
}
}
document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);