I have a Image, FileUpload and a Button controls. I want to save the image to the server from the local path obtained from FileUpload control. I implemented this functionality on Button Click in C#..
Now i want to set the image URL of Image control OnClientClick of the same button on which server side code is implemented.
Image URL will defer everytime depending on file selected in FileUpload control. Can anyone help me to understand how javascript can be used to set image URL based on thre file selected in File Upload Control?
First of all, understand that JavaScript doesn't understand, care, or even know about C# and its fancy "controls". It just deals with HTML. Period. That said, you can use JavaScript's setAttribute function to set the image URL of an img tag (not control). Like this:
document.getElementById('my-image').setAttribute('src', 'http://ecx.images-amazon.com/images/I/41%2BjAZ4dUGL._SS500_.jpg');
Demo here:
http://jsfiddle.net/je9Gx/
You can use this code to find the image control, where imgid is ID of image control;
$("[id$='imgid']").attr("src",pathfromfileuploader);
//pathfromfileuploader=it is a variable which stores the path taken from file uploader;
Hope it will help :)
Related
I have an application that loads an image - the URL of the image however is dynamically generated.
The image URL would look like this (I get the image name through their API):
http://openweathermap.org/img/w/10d.png
That URL is created in javascript - how would I make javascript actually get the image from that URL and return the .png so I could display it?
Would ajax be best for this? The solution would have be in regular javascript as the application displaying the image only allows for basic javascript.
Edit: This is for a digital signage solution - so I need to get the .png file into javascript where I will return ThePicture so the signage can display it appropriately. So unfortunately, just adding it to the/a DOM won't work.
I have an issue with latest tinyMCE editor, whenever I try to select and edit the image, it's source is converting into blob path like this.
blob:http://localhost/87d42e34-9961-412c-914b-dc6a77ab68e0
Did anyone of you face this issue or resolved... ?
Please help
When you edit images using the TinyMCE Image Tools you will get one of these encoded images - that is how the Image Tools work.
What you can then do is configure TinyMCE to upload this image and you can store that image as you see fit for your application.
The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.
The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:
Store the item in a folder on your web server
Store the item in a database
Store the item in an asset management system
...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:
{ location : '/uploaded/image/path/image.png' }
TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/
The net here is that the Image tools will create one of these encoded images whenever you edit an image. TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.
I'm trying to figure out how to grab the image from an external site, in my case, http://bikerace.com/tracks/[levelCode]
(as an example level code, nhx874, the url would be http://www.bikerace.com/tracks/nhx874)
Users on bikeracelevels(dot com) have to input the level code THEN upload a screenshot. I'm trying to remove this requirement by automatically grabbing the image based on the code they input, since I could append their input code to the url, then somehow find the image (since the only image on the page would be the one I want)
How could I accomplish this?
Thank you very much in advance!
Get this cross-domain AJAX plugin for use with jQuery: https://github.com/padolsey/jquery.fn/tree/master/cross-domain-ajax
Use it to load the page on bikerace.com/[levelcode], then select the image from the data as you normally would with jQuery.
I want to change the name of the image in file uploader using jquery.is there any chance to do that please let me know.I am struggling with that.
I am using the regular html file uploader
Thanks,
Sravz
It is impossible to change what is displayed in the file field after you have chosen a file. You can change the style or hide the text altogether though.
If you need to rename the file you will have to do it using whatever server side language you are using when the file is actually uploaded.
Is there anyway to take take a "screenshot", "save" or "capture" the active SWF element on a page as an image? I'd like for users to be able to simply click a button on my page, instead of having to need to manually take a screenshot of the entire page and then crop the image to show only the SWF element.
I found a Jquery method, although I am unsure if it could work with SWF files. It basically captures an area of an Image element on the page and allows you to save that as a separate image. What I would need however, is to capture the SWF as the image instead. Note: I do not have access to the SWF code so I cannot achieve this using Actionscript or anything like that -it has to be purely done with PHP and Javascript.
Thanks for any ideas :)
I don't think that there is a way to do this from Javascript, but if you host those swf files on your own server you could create a wrapper swf which loads the swfs you want to screenshot dynamically and then draws them into a BitmapData object.
The snapshot process inside of the swf can be triggered from Javascript via ExternalInterface, after that you can either serialize the raw pixels or use a PNG or JPEG encoder inside the wrapper swf to convert the bitmapdata to a image file and then send that data back to Javascript via ExternalInterface. Or you use the FileReference class in the swf to save the image file directly on the user's hard drive - one caveat in this is though that in order to trigger the save process the user will have to click a button inside the swf (that's a security feature).
There is one more prerequisite and that is that the swfs that you load into the wrapper have to be hosted on the same domain as the wrapper swf, otherwise the security sandboy will not allow to take a bitmap snapshot of it.
Look at ByteArray.getPixels(0,0,stage.stageWidth,stage.stageHeight) or var b;BitMap = BitMapData(stageW,stageH).draw(stage), depending on your needs. Note that the above two lines are not proper code, just the correct object and function names written in shorthand and from my head.