I try to display an image on a php page in js, knowing that my image via an input file.
here is my code:
<script>
function image(){
var x = document.getElementById("image_uploads");
var test = URL.createObjectURL(x);
//document.getElementById("img").src = URL.createObjectURL(x);
}
</script>
<body>
<div class="frItem31">
<form name="saisie" action="" method="post">
Image 1 :<input type="file" id="image_uploads" class="image_uploads" name="image_uploads" accept="image/*"/>
<br>
<img id="img" class="img">
<br>
<input type="button" id="calcVitesse" class="calcVitesse" value="calculer la vitesse" onclick="image()">
</form>
</div>
</body>
here is the error I get:
Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
at image (image.php:20:32)
at HTMLInputElement.onclick (image.php:80:125)
image # image.php:20
onclick # image.php:80
Could you help me please !?!
G.B.
you're passing an HTML element instead of a file. To get the file, use .files property, which behaves like an Array, so you can iterate it. see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files
try this:
function image() {
var x = document.getElementById("image_uploads");
if (x.files.length) {
var test = URL.createObjectURL(x.files[0]);
}
}
Related
I'm using cropper.js and when I try to initialize, i get the error Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload. I have copied the code from one last project I did, and in that project it works normally.
I have tried both of cropper and cropper.js and nothing works.
And I inport the cropper to html like this the the head of the document.
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/cropperjs/dist/cropper.js"></script>
<link href="node_modules/cropperjs/dist/cropper.css" rel="stylesheet">
<script src="node_modules/jquery-cropper/dist/jquery-cropper.js"></script>
My form is like this with the other fields in it.
<form action="backend/send.php" method="post">
...(more html with the other fields)
<p>Imagem Cabeçalho:<br>
<label class="form-filebutton">Carregar Imagem
<input type="file" id="imagem" name="imagem" accept="image/png, image/jpeg, image/JPEG, image/jpeg2000, image/jpg, image/gif">
</label>
</p>
...(more html with the other fields)
</form>
The image should appear here.
<div class="div-preview hidden">
<img class="img-preview" id="img-preview">
...(more html with buttons to edit the image)
</div>
Here is what I do to initialize Cropper.
$(function() {
var image = $("#img-preview"); //where the image should appear
//Initialize cropper when image is loaded in the form
$("input:file").change(function() {
$(".div-preview").removeClass("hidden"); //show the elements
var oFReader = new FileReader();
oFReader.readAsDataURL(this.files[0]);
oFReader.onload = function (oFREvent) {
image.cropper("destroy"); //In case I change the image
image.attr("src", this.result);
image.cropper({
aspectRatio: 1 / 1,
viewMode: 1,
toggleDragModeOnDblclick: false,
dragMode: "move",
crop: function(e) {}
});
};
});
...(more jQuery and JavaScript to control the buttons)
});
I'm expecting to open the cropper but I get the error Uncaught TypeError: image.cropper is not a function at FileReader.oFReader.onload in the first cropper (image.cropper("destroy");).
to fix it I just moved the following code to the body of my page.
<script src="node_modules/cropperjs/dist/cropper.js"></script>
<script src="node_modules/jquery-cropper/dist/jquery-cropper.js"></script>
I have a a python script which is being fed and executed from a html file. This script writes a json file and i'd like to read the json file with javascript. The values are definetely being passed from html to python and they are being processed correctly.
As soon as I want to load the json-file the web console throws an error saying "data is not defined".
The relevant python code:
data = {}
for i in range(t_final.size):
data[i] = t_final[i]
with open('data.json', 'w') as fp:
json.dump(data, fp)
Javascript call:
<script type="text/javascript" src="/cgi-bin/data.json"></script>
<script type="text/javascript" >
function load() {
var mydata = JSON.parse(data);
var div = document.getElementById('xbtn');
}
</script>
<div id="xbtn"></div>
This is what the json-file contains after executing
{"0": 0.0, "1": 0.013508013525931116, ... , "1999": -0.0}
I am working on this for days now and maybe I just don't see it. I presume it is something very obvious.
thanks for any help.
So. I have managed to set up ajax properly. The problem was that the endpoint was set wrong (obviously). So the data to be processed was sent to the json-file and not to the python script where it is supposed to be processed.
The ajax:
$(function(){
$('#btn2').click(function(){
$.ajax({
url: 'https://192.168.80.27/cgi-bin/verlauf_Grenzen.py',
type: 'post',
data: $('.senddata').serialize(),
success: function(data) {
window.alert("Data sent!");
},
});
});
});
the HTML:
<form class="senddata" method="POST" name="getdata1">
<input id = "testa1" type = "number" step=0.01 name = "a1" />
<input id = "testv1" type = "number" step=0.01 name = "v1" />
<input id = "tests1" type = "number" step=0.01 name = "s1" />
<input id = "testj1" type = "number" step=0.01 name = "j1" />
</form>
<input id="btn2" class="button" type="button" value="Send Values" value="Click"/>
This sends the form elements to the python script.
my code does not seem to be able to pull the image from my desktop for a preview. i don't know what. All it was does, is show me a broken image. Here is the code.
javascript
function ajaxFileUpload(upload_field)
{
// Checking file type
var re_text = /\.jpg|\.gif|\.jpeg|\.png|\.gif/i;
var filename = upload_field.value;
if (filename.search(re_text) == -1) {
alert("File should be either jpg or gif or jpeg or png");
upload_field.form.reset();
return false;
}
document.getElementById('picture_preview').innerHTML = '<img src="" width="10%" border="0" />';
upload_field.form.action = 'upload-picture.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.submit();
upload_field.form.action = '';
upload_field.form.target = '';
return true;
}
HTML
<!-- iframe used for ajax file upload-->
<!-- debug: change it to style="display:block" -->
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<!-- iframe used for ajax file upload-->
<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data">
<div>
<span>Upload Picture :</span>
<input type="file" name="picture" onclick="preview()" id="picture" onchange="return ajaxFileUpload(this);" />
<span id="picture_error"></span>
<div id="picture_preview"></div>
</div>
</form>
Something like this should work:
Javascript
var input = document.getElementById('image_uploader');
var uploadedImage = document.getElementById('uploaded_image');
input.addEventListener('change', onImageInput);
function onImageInput()
{
var imageFile = input.files[0];
var reader = new FileReader();
reader.addEventListener('loadend', onReaderComplete);
reader.readAsDataURL(imageFile);
}
function onReaderComplete(e)
{
uploadedImage.src = e.target.result;
}
HTML
<input type="file" id="image_uploader"/>
<div id="picture_preview"><img id="uploaded_image"/></div>
After this, you can send the image data (src) to the server with AJAX or other stuff like that.
I have a script where users can submit pictures to a google doc, but when I upload multiple pictures with the file input, google script doesnt append all the images. How would i rewrite my code so it appends all the images i selected with the <input type="file" multiple />
Is theForm.theFile an array of all the pictures i uploaded? because theForm.theFile[0] does not work.
code.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function serverFunc(theForm) {
doc = DocumentApp.openById("my top-secret id...");
var img=doc.appendParagraph(theForm.theFile.getName()+":\n").setIndentStart(4).appendInlineImage(theForm.theFile)
//resize image to fit in page if necessary
while(img.getWidth()>750){
img.setWidth(img.getWidth()/1.1).setHeight(img.getHeight()/1.1)
}
}
index.http:
<form style="outline:2px solid blue;">
<input type="file" name="theFile" multiple />
<input type="button" value="UpLoad" id="button" onclick="google.script.run.serverFunc(this.parentNode)" />
</form>
Works with http://www.fyneworks.com/jquery/multiple-file-upload/#. You can then access each file through:
for (i = 0; i < theForm.theFile.length-1; i++) {
var blob = theForm.theFile[i];
var file = folder.createFile(blob);
}
I would also recommend looking into this example but using the DocsList Service instead:
https://developers.google.com/apps-script/guides/html/communication#forms
Hope this helps you get your head around it.
I have this piece of code and I was wondering how I would be able to display an alert message when the embedded link does not exist. Is this possible?
<script type="text/javascript">
function soniaZsound(track) {
var link = 'https://ssl.gstatic.com/dictionary/static/sounds/de/0/'+track+'.mp3';
document.getElementById("myspan").innerHTML='<embed src="'+link+'"' +
'onError="alert("sorry this word is not in the database");"' +
'`autostart=true loop=false hidden=true` type="audio/mp3">';
}
</script>
<body>
<span id="myspan"></span>
<form name= "searchwords" id="searchwords">
How does this word sound: <input type="text" name= "soundSearch"><input type="button"
value="GO" onclick="soniaZsound(document.forms['searchwords']['soundSearch'].value);">
</form>
</body>
If you are allowed to read content from that domain you can do a HTTP HEAD request to see if the file exists:
$.ajax({
url:'http://www.example.com/somefile.ext',
type:'HEAD',
error:
function(){
//file does not exists
},
success:
function(){
//file exists
}
});