I am trying to upload a file a view the file on an iFrame but it is not working.
Here is what I have tried
jQuery('.file_upload1').change(function(){ jQuery('iframe').attr('src', jQuery(this).val()); $('iframe').attr('src', $('iframe').attr('src')); });
<label><input class="file_upload1" name="file_cover" type="file"></label>
<div>
<iframe src=""></iframe>
</div>
If this does not work, can I move the uploaded file to server directory so that the path becomes valid? How would I do this?
Apart from other problems and limitations of such solution, and specifically answering "why it does not work?" question:
The change event needs to be nested in ready function:
jQuery("document").ready(function() {
jQuery('.file_upload1').change(function() {
jQuery('iframe').attr('src', jQuery(this).val());
});
});
The src attribute of iframe must be a valid non-empty URL potentially surrounded by spaces. When selecting a file with input type file, in Windows the value will be something like c:\fakepath\file name goes.here, so before using as iframe source, you will have to rework it a little bit.
Regarding
I'm trying upload file and display it on iframe forcing it to reload
You don't need to force reload to achieve this. "Upload" means the page will be reloaded (well, unless upload is handled using AJAX, but it's not the case here I guess). In order to upload a file, the form must be submitted and the page needs to be reloaded. Once reloaded, you can easily construct the full path of the file and use it in iframe, something like:
<iframe src="<?php echo $file_full_url; ?>"></iframe>
But if you want to preview the file in iframe before uploading to server - it won't be possible due to security reasons. See this question for reference: How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
Related
I'm very new to coding on the web and I'm trying to make something work.
I'm trying to make a little webpage with an easy function to replace an existing image on the page with an image that the users chooses from his own computer. All of this is expected to be done offline. I have however, no idea how..
How do I tackle this?
p.s. With offline I mean, I am expected that this can be done locally without uploading to a server or anything. I am supposed to put this little page on a usb stick so it can be used as a little tool.
Well. you will need to implement file upload functionaility.
you could uses http://www.uploadify.com/
if so then you would use the onUploadSuccess method, to change the image.
when you say offline? do u mean no internet connection, or will the webpage live on a server like a intranet?
............Just to add to my own answer ........
OK, So you need it on a USB. why not install a standalone Server on the USB that way you can run PHP.
http://www.server2go-web.de/index.html
http://www.uwamp.com/en/
$("#file_upload").uploadify({
height : 30,
width : 120,
swf : 'include/fileuploader/uploadify.swf',
uploader : 'include/fileuploader/uploadify.php',
'onUploadSuccess' : function(file, data, response) {
console.log('The file was saved to: ' + data);
$("#img-preview").html("<img src='"+data+"' />");
}
});
I thought I'd show a code example, as this is the idea of StackOverflow. I hope it illustrates how this thing works.
Instead of relying on a set of plugins and libraries you will find out that it is perhaps even easier with native javascript. You can add jQuery to the mix for event handling, etc if you want, it is pretty much standard in the web-dev toolkit anyway.
HTML
First lets add the html for the input and a placeholder img element. You could of course dynamically add the img file with jQuery or native js.
<input id='ourfile' type='file' />
<!-- The image placeholder for our preview -->
<img id='preview' src='' />
Javascript
// Lets cache our two elements of interest.
ourfile = document.getElementById('ourfile');
preview = document.getElementById('preview');
// Create an instance of the 'native' FileReader.
fr = new FileReader();
// When our input triggers change (i.e. image is selected) load the file using the file reader.
ourfile.onchange = function () {
file = ourfile.files[0];
fr.readAsDataURL(file);
}
// Bind to the `onload` event of our FileReader and set the src of the image to the result (base64 of the image).
fr.onload = function(){
preview.src = fr.result;
}
Details
The link in #Akki619's answer shows about details for checking validity of the image, etc.
Fiddle
Here is a link to a working example:
http://jsfiddle.net/rUvUX/4/
This (readAsDataURL) is what you are looking for.
See working example here
In the example attached, you can send the base64 data of your selected image for uploading also.
OUT OF TOPIC HERE: Most of the client are looking for a mobile web app, an app to take picture from phone and send to the server. Not entirely feasible in web apps.
you can use the below javascript to do this:
<script>
function changeImage(newimage)
{
image = document.getElementById('oldimage');
image.src = newimage;
}
</script>
Is it possible to open a new window using a html file on the server? But the "myfile.html" can't be accessed on browser url?
<FORM>
<INPUT type="button" value="New Window!"
onClick="window.open('./publico/myfile.html','mywindow')">
</FORM>
I'm using PHP with the ff workspace:
C:\workspace\myproject\publico\index.html
Or do you have any suggestion please?
Thank you very much!
No, not like in your example. window.open is JavaScript code that tells the user's web browser to open a window. the user's web browser can't access files on your server unless those files are available over the web, i.e. at a URL.
You might be able to use PHP to write out the document's contents in a JavaScript string, and then use JavaScript to add that content to the newly opened window.
Here's a very shonky example with JavaScript that pretty much seems to work in Chrome, but I'm sure the code can be improved, it might not be reliable cross-browser, and I don't know enough PHP to write that bit:
<script>
var newWindowContent = '<?php echo WHATEVER_PHP_CODE_WILL_WRITE_OUT_THE_HTML_PROPERLY_ESCAPED ?>';
</script>
<FORM>
<INPUT type="button" value="New Window!"
onClick="var mywindow = window.open(); mywindow.document.getElementsByTagName('html')[0].innerHTML = newWindowContent;">
</FORM>
No.
The webserver doesn't know if the browser wants to display the file in a specific window. That means it can't handle permissions depending on this.
When you want the user to be unable to access a specific file unless a specific condition is met, you could make that file a php file, set a cookie before requesting it, and make the php file return a 403 forbidden error code when this cookie isn't set and the content when it is (keep in mind that the user can forge cookies).
I'm using Codeigniter's upload library to upload images for user avatars. I'm also using Jcrop which allows users to select an area to crop.
(source: webresourcesource.com)
I'm saving all the coordinates of the selected area in text inputs which I'll use in php to crop.
Is it possible to display the image selected before uploading?
Upload form:
<?php echo form_open_multipart('upload/do_upload');?>
<input type="file" name="userfile" size="20" />
<input type="submit" value="upload" />
</form>
If possible I'm trying to avoid heavy js for this or uploading 2 times. When choosing a file I notice that it shows the name of it:
Is there a way to use that functionality to retrieve the image path as well (path to the image in the uploader's computer)? In theory I'll be able to use that in image tags and display the image without js.
To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.
Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, ...?) Eons ago you could do this, but we got wise.
The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.
When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API's exist where you can read the bytes but you want to set it as the source of an image.
Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:
input.addEventListener('change', function () {
preview.src = URL.createObjectURL(this.files[0]);
});
preview.addEventListener('load', function () {
URL.revokeObjectURL(this.src);
alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height);
});
Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.
You could potentially do it using css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), but it's going to be incredibly hard to integrate with jcrop...
I would recommend just making the user wait until it has been uploaded. That's what facebook and most other websites that allow cropping do.
In any case it wouldn't speed up the upload process so there isn't that much a reason to do it.
You can't get the full filepath. It would be a security issue: http://forums.asp.net/t/1077850.aspx/1
Well, you can use other cropper library wich comes with a preview like the one defusion has.
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
I have no idea how to do this. I want to insert php code into an image source through jquery.. but it is not working. Here is my code and help would be greatly appreciated!
JQUERY:
var mainId = $(this).attr('id');
$("#intabdiv img").attr('src', '<?=resize("../php/admin/portfolio/before/'+mainId+'",$settings)?>' );
HTML:
<div id="intabdiv">
<?php $settings = array('w'=>450,'h'=>450,'crop'=>true); ?>
<img src="" border="0" class="pic" />
</div>
</div>
It looks to me like you're trying to have the client browser execute PHP. That's not going to work for you. I'm not sure you have a completely clear idea of the separation between server and client, and what happens where.
Here's a simple model that you can use to think about where things occur:
User puts URL in browser and hits enter
Browser sends request to server
Server receives request and attempts to provide the resource requested
At this stage, if the file is a PHP file, any PHP instructions are executed. The end result of this, after all PHP is finished and done, is an HTML file, perhaps with some javascript.
The server sends this HTML file back to the browser.
The browser loads the HTML file, and executes any javascript, which can manipulate the HTML on the client side.
So, where does that leave us? You're attempting to take an image file that exists on the server, resize it, and display it to the end user. Presumably the "resize" function is one you have defined somewhere in your PHP code. I'll go on the assumption that you just need to do this once and have it show up for the user when the page loads.
In this case, what you need to do is something more like the following (all in the same file):
<?php
$settings = array('w'=>450,'h'=>450,'crop'=>true);
$imgsrc = resize("../php/admin/portfolio/before/imageid.jpg",$settings);
?>
<div id="intabdiv">
<img src="<?= $imgsrc; ?>" border="0" class="pic" />
</div>
... no javascript required. Obviously, imageid.jpg must be the actual filename of the image you're trying to access. If, instead, you're trying to have some user action trigger the access to the image, please provide more context for what you're trying to accomplish and a better answer can be given.
The problem is you set the html as having an ID, but jquery is using the selector as being a class.
So change it from:
$(".intabdiv img")...
To
$("#intabdiv img")...
Why not use something like jcrop? http://deepliquid.com/projects/Jcrop/demos.php
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.