I have this radupload:
<telerik:RadUpload ID="RadAsyncUploadBoxLogo" ClientID="RadAsyncUploadBoxLogo"
runat="server" ControlObjectsVisibility="None"
MaxFileInputsCount="1" MaxFileSize="4000000" OverwriteExistingFiles="True" ReadOnlyFileInputs="True"
Height="10px" TabIndex="12" OnClientFileSelected="OnClientFileSelectedHandler"
>
<Localization Remove="" Select=" Seleccionar Imagen" />
</telerik:RadUpload>
And i have this tag image
<asp:Image ID="ImageLogo" ClientId="ImageLogo" CssClass="ImgLogo" runat="server"/>
with this script I try to put the image in the image tag:
function myOnClientFileSelect(radUpload, eventArgs) {
var url = radUpload.getFileInputs()[0].Value;
$('.ImgLogo').attr("src", url);
}
The problem is that the variable url throws me a path: fakepath/filename , I read that the radupload throws for security so that others can not access the file path , but as how to get the real path of the file to display it on the tag image
Where file_input is a reference to a <input type="file"> and img is a reference to an <img>, in the change handler you can do
if (file_input.files && file_input.files.length) { // some file has been set
// generate a blob uri to the file
var uri = URL.createObjectURL(file_input.files[0]);
// set this as the src of your <img>
img.src = uri;
}
This code uses URL.createObjectURL which requires IE 10+, to support lower versions of IE you may need to use a <canvas> instead of an <img> so you can load the file differently.
Related
my question is how to display the selected file image from the input file in img tag, I have described the code below.
<img src="" width="200" height="100">
<input type="file" name="logo" id="upload-logo" />
$('#upload-logo').on('change', function(){
let logo = $(this).val();
$('img').attr('src', logo);
});
but the result I got after changing the src attribute is: Not allowed to load local resource: file: /// C: /fakepath/Capture.PNG, and photos are not displayed
I do not want to use ajax
You must use the file reader to validate and allow preview of the uploaded image. the browser disallows the access to local system files for good reason and the file inputs place files in a temporary folder system that the browser is allowed to access.
Here is an example of how to use the File Reader Source
const reader = new FileReader();
reader.onload = function(e) {
// do something with the result
var file = reader.result || e.target.result;
}
reader.readAsDataURL(input.files[0]);
I'm having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML that has something like the following:
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="http://path/to/some/image.jpg" />
Then on the jQuery side I have the following:
$('#file').change(function(e){
alert($(this).val());
});
I was hoping to replace the imagedisplay's src with the one the user selects referenced locally to their system but $(this).val() only displays the file name so I won't be able to reference it as the source.
You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File.
Note: It works in Modern browsers
$(document).ready(function() {
$('#file').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagedisplay').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="" />
I am doing image editing integration with Aviary.
Below is the html code
<body>
<a href="#" onclick="return launchEditor('editableimage1','http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg');">
<img id="editableimage1" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"/></a>
<br>
<form id="myform" action="" method="post">
<input id="hf" type="hidden" name="url">
<input type="submit" value="Save" />
</form>
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<!-- Instantiate the widget -->
<script type="text/javascript">
var featherEditor = new Aviary.Feather({
apiKey: '1234567',
apiVersion: 3,
theme: 'light',
tools: ['draw','text'],
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
console.log('newURL '+newURL);
document.getElementById("hf").value=newURL;
featherEditor.close();
//document.forms["myform"].submit();
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
</body>
On opening the above html:
Image will be rendered.
On click of the image, image editing tool will open with the image in it.
But if I replace the url with any other image url say http://ipaddress:8080/ImageCheck/imgjsp.jsp which actually renders image in the browser.
Image will be rendered.
On click of the image, image editing tool opens and close immediately with the error {"errors":["Invalid image URL"]} . Tool is unable to get image into its server for editing from my UrL.
What is the difference between "http://ipaddress:8080/ImageCheck/imgjsp.jsp" and "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" for tool to behave differently. Any help appreciated
We are getting the same error too, I've did some searching and found this:
https://creativesdk.zendesk.com/hc/en-us/articles/202903359-Migrating-from-the-Aviary-SDK-to-the-Adobe-Creative-SDK-Beta
It looks like Aviary has updated their API
is http://ipaddress:8080/ImageCheck/imgjsp.jsp points to local ip?
according to https://creativesdk.adobe.com/docs/web/#/articles/gettingstarted/index.html, "requires that the image at the location be publicly available as our server must download it.".
On the other hand, we were able to pass base64 encoded image as a value for url parameter. This way, no need to have actual image to be stored first.
(This approach is not working for us when using hi-res version of Aviary image tool).
I'm having the user select an image and I want to change the one shown on the fly without having to rely on server-side scripts like PHP?
Basically, I have an HTML that has something like the following:
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="http://path/to/some/image.jpg" />
Then on the jQuery side I have the following:
$('#file').change(function(e){
alert($(this).val());
});
I was hoping to replace the imagedisplay's src with the one the user selects referenced locally to their system but $(this).val() only displays the file name so I won't be able to reference it as the source.
You can use FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
Its method FileReader.readAsDataURL()
The readAsDataURL method is used to read the contents of the specified Blob or File.
Note: It works in Modern browsers
$(document).ready(function() {
$('#file').change(function(e) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagedisplay').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file" />
<img id="imagedisplay" src="" />
So I'm using this library
https://github.com/jhuckaby/webcamjs
I get a data uri for the web cam image and I pass it into a template like this
this.$el.append(this.template.render({
imageUri: imageUri
}));
Where the template looks like -
<img src=<%= imageUri.imageUri %>/>
When I console log the imageUri, it is clickable in the console and when I click on it, I see the image in the browser.
However, I get an error with the template like this -
GET (imageUri) net::ERR_INVALID_URL
Why is it suddenly invalid in the img src, but not when I click on it in console?
What are the <%, is that webforms syntax? If so, you need quotes:
<img src='<%= imageUri.imageUri %>'/>
The source needs to be in quotes when it is rendered.