So the problem is that I want to create an img element with the same src as the insert file but its not working and I dont know why, here is the code:
<!DOCTYPE html>
<html>
<head>
<title>HMM...</title>
</head>
<body>
<input type="file" id="wowo">
<div id="dispImg">
</div>
<button onclick="wp()">run</button>
<script>
window.URL = window.URL || window.webkitURL;
function wp() {
var file = document.getElementById("wowo").value;
var nopath = file.substring(12);
alert(nopath);
var crimg = document.createElement("img");
crimg.src = window.URL.createObjectURL(nopath);
crimg.height = 60;
crimg.onload = function() {
window.URL.revokeObjectURL(this.src);
}
document.getElementById("dispImg").appendChild(crimg);
}
</script>
</body>
</html>
Thank you.
You can try this code:
function wp() {
var files = document.getElementById("wowo").files;
// FileReader support
if (FileReader && files && files.length) {
var crimg = document.createElement("img");
var fr = new FileReader();
fr.onload = function () {
crimg.src = fr.result;
}
fr.readAsDataURL(files[0]);
crimg.height = 60;
document.getElementById("dispImg").appendChild(crimg);
}
}
This is a demo https://jsbin.com/qaqoveq
Related
I am using mPDF and other library for generating PDF/ Image from HTML code or file. below I have mentioned my HTML code from which need to generate .JPG or .PNG or .PDF
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://codeclippers.xyz/320x50/app.min.css" />
</head>
<body>
<div id="addsp320x50"></div>
</body>
<script src="http://codeclippers.xyz/320x50/app.min.js"></script>
<script type="text/javascript">
var availbleTitles = ["title1", "title2", "title3", "title"];
var availableVsprite =["https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b40d48_1602501995.jpeg", "https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b7e2b0_1602501995.jpeg"];
var availableVicons = [""];
var availbleBasicOptions = [""];
var availbleDescription = [""];
var selectedVsprite = availableVsprite[Math.floor(Math.random() * availableVsprite.length)];
var selectedVicons = availableVicons[Math.floor(Math.random() * availableVicons.length)];
var selectedTitles = availbleTitles[Math.floor(Math.random() * availbleTitles.length)];
var selectedDescription = availbleDescription[Math.floor(Math.random() * availbleDescription.length)];
var selectedBasicOpt = availbleBasicOptions[Math.floor(Math.random() * availbleBasicOptions.length)];
cOptions.isAnimated = true;
cOptions.animatedVariation = "vinfinite-scroll";
cOptions.titleText = selectedTitles;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].backgroundSpriteURL = selectedVsprite;
if(selectedVicons != "") {
cOptions.animationOptions[0].verticalInfiniteAnimation[0].showIcon = true;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].actionIconImage = selectedVicons;
}
cOptions.descrptionText = selectedDescription;
for(const [key, value] of Object.entries(selectedBasicOpt)) {
if(typeof value === 'boolean') {
cOptions[key] = value;
} else {
cOptions[key] = value.replace(/"/g, "").trim()
}
}
renderCreative();
</script>
</html>
Thanks in advance
I am quite new in Javascript, and I am trying to parse the log something like
2014-02-25T,ip='99.114.',rm=GET,rv=HTTP/1.1,rs=200,rt=0.787020,ru='/tag/febe1eab436e98eb4ed3711870496c91/st.js?l=http%3A%2F%2Fwww.michaels.com%%2Fon%2Fdemandware.store%2FSites-Michaels-Site%2Fdefault%2F-scrapbooking',cl=996,rr='http://www.michaels.com/videos/KBPP1Vm3075,default,pg.html?fdid=videos-scrapbooking',
I want to separate them by ',', and only show 'rr' attribute. Following is my code, and when I run it, there is nothing shown.
<!DOCTYPE html>
<html>
<head>
<title>reading file</title>
<script type="text/javascript">
var reader = new FileReader();
function readText(that){
if(that.files && that.files[0]){
var reader = new FileReader();
reader.onload = function (e) {
var output=e.target.result;
var str = output;
var start =0;
var end = 0;
while (end<str.length){
while (end<str.length && str.charAt(end)!=',') {
end++;
}
var stringLine="";
if (end==str.length) {
stringLine = str.substring(start, str.length);
}else {
stringLine = str.substring(start, end+1);
}
var signIndex=0;
while (stringLine.charAt(signIndex)!='=') {
signIndex++;
}
var newSubString = stringLine.substring(0,signIndex);
if (newSubString==="ip"){
document.write(stringLine);
document.write("<br />");
}
start=end+1;
end=start;
}
};//end onload()
reader.readAsText(that.files[0]);
}//end if html5 filelist support
}
</script>
</head>
<body>
<input type="file" onchange='readText(this)' />
<div id="main"></div>
</body>
</html>
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; i<2 ; i++){
f = files[i]
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="',escape(theFile.name), '"/>'].join('');
document.getElementById('pic'+i).insertBefore(span, null);
};
})(f,i);
reader.readAsDataURL(f);
}
}
I have this script from HERE, EXAMPLE 3 and i am trying to put every file in different place.
<tr><td colspan="2"><input type="file" id="inputFilesID" multiple ></td></tr>
<tr><td>Front</td><td><output id="pic0" /></td></tr>
<tr><td>Back</td><td><output id="pic1" /></td></tr>
For example, if that is mine html, why if i put 2 images my script trying to put everything at:
<tr><td>Bottom</td><td><output id="pic2" /></td></tr>
//Logic in Scripts.js
var canvas = document.getElementById('our-canvas'),
context = canvas.getContext('2d');
uploadedFile = document.getElementById('uploaded-file');
window.addEventListener('DOMContentLoaded',initImageLoader) ;
function initImageLoader(){
uploadedFile.addEventListener('change',handleManualUploadedFiles);
function handleManualUploadedFiles(ev){
var file = ev.target.files[0];
handleFile(file);
}
}
function handleFile(file){
var ImageType = /image.*/;
if(file.type.match(ImageType)){
var reader = new FileReader();
reader.onloadend = function(event){
var tempImageStore = new Image();
tempImageStore.onload = function(ev){
canvas.height = ev.target.height;
canvas.width = ev.target.width;
context.drawImage(ev.target,0,0);
}
tempImageStore.src = event.target.result;
}
reader.readAsDataURL(file);
}
}
//Showing in HTML
<b>our image canvas </b>
<input type="file" id="uploaded-file" />
<canvas id= "our-canvas" class="image-container"> </canvas>
<script src="scripts.js" > </script>
use npm jimp
============================
Jimp.read('./path/to/image.jpg')
.then(image => {
console.log(image.bitmap)//having the image buffer data,width,height ...etc
// Do stuff with the image.
})
.catch(err => {
// Handle an exception.
});
I am trying to get the name from input file type to display the name in a p tag, below is my code, advance thanx to all.
<script type="text/javascript">
var path = document.getElementById("photo").value;
var filename = path.substring(path.lastIndexOf("/") + 1);
document.getElementById("log").innerHTML = filename;
</script>
<input type="file" id="photo"/>
<p id="log"></p>
Try below code...
Demo Fiddle
var input = document.getElementById("photo");
input.onclick = function () {
this.value = null;
};
input.onchange = function () {
var path = input.value;
var filename = "";
if(path.lastIndexOf("\\") != -1)
filename = path.substring(path.lastIndexOf("\\") + 1,path.length);
else
filename = path.substring(path.lastIndexOf("/") + 1,path.length);
document.getElementById("log").innerHTML = filename;
};
I assume that you's trying to get the name of the file. Below is the code of doing that:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function showfile()
{
var path = document.getElementById("photo").value;
var filename = path.substring(path.lastIndexOf("\\") + 1);
document.getElementById("log").innerHTML = filename;
}
</script>
</head>
<body>
<input type="file" id="photo" onchange="showfile()"/>
<p id="log"></p>
</body>
</html>
Have been trying to use the JSZip library to cycle through files in a .zip, looking for one (here, test.txt) that I want to parse for content.
Have attempted to do a modification of the sample [recommend viewing source on that] that JSZip provides:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class = "container">
<div class = "hero-unit">
<input type="file" class="span7" id="input" name="file" multiple /> <!-- redo this in a bootstrappy way-->
<br>
<output id="output"></output>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="/js/jszip-load.js"></script>
<script src="/js/jszip.js"></script>
<script src="/js/jszip-inflate.js"></script>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
if (f.type !== "application/zip") {
document.getElementById('output').innerHTML = "<p class='text-error'>" + f.name + " isn't a zip file.</div>";
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var zip = new JSZip(e.target.result)
$.each(zip.files, function (index, zipEntry) {
if (zipEntry.name == "test.txt"){
var text = zipEntry.asText();
var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks
for(var i = 0; i < lines.length; i++) {
if (lines[i].length > 240){
output.push('<li>' + lines[i] + '<br>');
}
}
document.getElementById('output').innerHTML = '<h2>Paths with more than 240 characters:</h2> <br><ol>' + output.join('') + '</ol>';
else{
alert("file not found!")
}
}
});
}
})(f);
}
}
document.getElementById('input').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
For some reason, I'm sure having to do with the way that I am using the closure, it is not actually parsing the .zip files in question. Any ideas what I might be doing wrong here?
I use this code and am able to get all file data. content variable has file content:
function loadSettingsFile(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
try {
var zip = new JSZip(e.target.result);
$.each(zip.files, function (index, zipEntry) {
var content = zipEntry.asText();
alert(content);
});
} catch(e) {
alert(e)
}
}
})(f);
// read the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
// reader.readAsBinaryString(f);
}
}