CODEWITHSUNDEEP
phpjqueryhtmlfile-upload
MayuriS
MayuriS

Reputation: 387

jQuery View Uploaded File

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?

Upvotes: 1

Views: 281

Answers (1)

TazGPL
TazGPL

Reputation: 3748

Apart from other problems and limitations of such solution, and specifically answering "why it does not work?" question:

  1. 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());
    });
});
  2. 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?

Upvotes: 1

Related Questions