Any difference in its implementation?
This doesn't work:
backgroundImage1 = "url('data:image/png;base64,"+data.Items[0][2].Value+"')";
but when I change
data.Items[0][2].Value
to actual base64 data (value of that item) ,
it properly displays the image in my div background.
What did I miss in the code ?
In javascript if you get the value of input then it's display the file path so please find the below code which help you:
function readFile() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.addEventListener("load", function (e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").innerHTML = e.target.result;
});
FR.readAsDataURL(this.files[0]);
}
}
document.getElementById("myFile").addEventListener("change", readFile);
<!DOCTYPE html>
<html>
<head>
<title>A test</title>
</head>
<body>
<input type="file" id="myFile" multiple size="50">
<br />
<br />
<br />
Display Base64: <p id="b64"></p>
<br />
<br />
Display Image:
<br /><img id="img" height="150">
</body>
<html>
Related
Hi everyone i'm trying to use Jquery and Modernizr to select 1 .txt file from my pc
I have the next code on my project:
<!DOCTYPE html>
<html>
<head>
<title>Read file on HTML5</title>
<meta charset="UTF-8">
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="modernizr.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if (Modernizr.draganddrop && window.FileList) {
} else {
alert("Your browser doesn't support API or Drag&Drop");
}
;
$('#file').change(filedriver);
function filedriver(event) {
var file = event.target.files[0];
if(file.type !== "text/plain"){
alert("File .txt must be select");
return;
}
var reader = new FileReader();
reader.onload = function(event){
var textResult = event.target.result;
$('content').append(textResult);
};
reader.readAsText(file);
}
});
</script>
</head>
<body>
<h1>Read file on HTML5</h1>
<form>
<label>Select file </label>
<input type="file" name="file" id="file" />
<p>Content on file</p>
<textarea cols="100" rows="15" id="content"></textarea>
</form>
</body>
</html>
When i execute the proyect on my browser the validation for the file works, but the reader doesn't return the content on the file.
¿where it's my error?
https://www.dropbox.com/s/sxrvou2spfdjgte/LecturaArchivoTexto.rar?dl=0
enter image description here
The problem is once you select an image from the file manager, and use it after one minute, an error would occur.
I have searched for a long time but no result.
Could anyone provide a document or tell me how to address this situation?
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
</head>
<body>
<div><img style="width:200px;height:200px" id="uploadPreview" src="" alt="Image preview" />
<input id="uploadImage" type="file" name="myPhoto" />
<button onclick="loadImageFile()">Save</button></div>
<div id="error"></div>
<script>
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
document.getElementById("error").innerText='';
};
oFReader.onerror = function(error){
document.getElementById("error").innerText=error.toString();
}
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</body>
</html>
HELP!!!
I would like to grab a file from the input tag and convert it to a URL then display that URL in the paragraph tag.
Is this possible with only Javacript/HTML?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
<body>
<form action="demo_form.asp">
<input type="file" id="wow" name="pic" accept="image/*">
</form>
<script>
$("document").ready(function(){
$("#wow").change(function() {
document.getElementById("penut").innerHTML = document.getElementById("wow").files.toDataUrl();
});
});
</script>
<p id="penut"></p>
</body>
</html>
Six days later but I found some code that does it.
<p>Select a File to Load:</p>
<input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />
<p>File Contents as DataURL:</p>
<textarea id="textAreaFileContents" style="width:640;height:240" ></textarea>
<script type="text/javascript">
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textAreaFileContents = document.getElementById
(
"textAreaFileContents"
);
textAreaFileContents.innerHTML = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
</body>
</html>
I have a program to upload multiple images to server. I am trying to preview the selected images before upload So that I could delete the unwanted image if necessary. I am stuck with the previewing part. Please help.
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Image</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="files[]" id="fileToUpload" onChange="readURL(this)" multiple
accept="image/*" />
<input type="submit" value="Upload Image" name="submit">
<img id="preview2" src="#" alt="your image" width="100" height="100" />
<img id="preview" src="#" alt="your image" width="100" height="100" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('preview').src=e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
php
<?php
$valid_formats = array("jpg", "png", "gif");
$max_file_size = 1024*720; //100 kb
$path = "gallery/"; // Upload directory
$count = 0;
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
// Loop $_FILES to exeicute all files
foreach ($_FILES['files']['name'] as $f => $name) {
if ($_FILES['files']['error'][$f] == 4) {
continue; // Skip file if any error found
}
else{ // No error found! Move uploaded files
if(move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name))
$count++; // Number of successfully uploaded file
}
}
}
?>
Try some thing similer to this
JS
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#test').attr('src', e.target.result);
//$("#test").css("display", "block");
$('#test').css({"display":"block","float":"right" });
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
Html
<div style="width:350px;">
<form id="form1" enctype="multipart/form-data">
<input onchange="readURL(this);" type="file" />
<img alt="Image Display Here" id="test" src="#" height="100px" width="100px" />
</form>
</div>
Css
<style>
#test { display:none; }
</style>
Note: TESTED
Js Fiddle Preview
Assuming you do have html input array , so why are you working over id .. even you are passing the reference of element
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).attr(src,e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Use this code Its working for multiple upload, Download jquery-1.10.2.min.js and replace this path(xxxxx Your path to access JQUERY xxxxxxxxxxx/) to your actual path. (Its working)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Image</title>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="files[]" id="fileToUpload" onChange="readURL(this)" multiple
accept="image/*" />
<input type="submit" value="Upload Image" name="submit">
<div class="preview-area"></div>
</form>
<script type="text/javascript" src="xxxxx Your path to access JQUERY xxxxxxxxxxx/jquery-1.10.2.min.js"></script>
<script>
var inputLocalFont = document.getElementById("fileToUpload");
inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input
function previewImages(){
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for(var i = 0; i < fileList.length; i++){
//get a blob to play with
var objectUrl = anyWindow.createObjectURL(fileList[i]);
// for the next line to work, you need something class="preview-area" in your html
$('.preview-area').append('<img src="' + objectUrl + '" width="100" height="100"/>');
// get rid of the blob
window.URL.revokeObjectURL(fileList[i]);
}
}
</script>
</body>
</html>
Javascript novice, looking to write a program that takes an input file, filenames.txt, tests each line to see if it contains a file path that is > 256 characters, and then outputs the results both as on-screen text and as a serializable format, i.e. .csv
here's the code that I have so far, I'm asking how to access the file selected and parse it for paths longer than 256 characters
<html>
<head>
<title>256 character finder</title>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
Pick a file:
<br>
<input id="lefile" type="file" style="display:none">
<div class="input-append">
<input id="fileSelect" class="input-large" type="text">
<a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
</div>
<div>
<input type="text" value="whatever" class="field left" readonly>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('input[id=lefile]').change(function() {
$('#fileSelect').val($(this).val());
});
}
</script>
</html>
http://jsfiddle.net/Fcg2X/
Try this:
$(document).ready(function() {
$('[type=file]').change(function() {
if (!("files" in this)) {
alert("File reading not supported in this browser");
}
var file = this.files && this.files[0];
if (!file) {
return;
}
var fileReader = new FileReader();
fileReader.onload = function(e) {
var text = e.target.result;
//do something with text
document.body.innerHTML = text;
};
fileReader.readAsText(this.files[0]);
});
});
Btw non-supporting browsers include IE9 so be aware. Has been working for years in Firefox and Chrome though.