Отображение документов без обновления страницы

Мне любопытно узнать, можно ли показать docx файл (который доступен на сервере) внутри div без обновления этой страницы (используя API Google Doc Viewer или любым другим возможным способом).

Позвольте мне очистить мое требование: —

HTML + JQUERY код:

  <div class="browse-flie col-md-7">
<div class="alert alert-danger" style = "display:none;"></div>
<input type="file" id="uploaddocfile">
<button name="upload" value="Upload" class="btn EditBtn uplaod_file">Upload</button>
</div>
<div id = "myid" style = "height:500px;width:600px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('.uplaod_file').on('click', function() {
var file_data = $('#uploaddocfile').prop('files')[0];
var ext = file_data.name.split('.').pop();
if(ext == 'docx'){
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'upload.php', // point to server-side PHP script
dataType: 'text',  // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
var response = $.parseJSON(php_script_response);
if(response.status == 'error'){
$('.alert-danger').css({'display':'block'});
$('.alert-danger').html('file upload failed please try again');
}
if(response.status == 'success'){
$('#myid').html("http://docs.google.com/gview?url=http://loalhost:8888/Grade/uploads/IEP Form-1.docx&embedded=true");
}
}
});
}else{
$('.alert-danger').css({'display':'block'});
$('.alert-danger').html('file extension must be docx'); return false;
}
});
</script>

Код PHP:

<?php

// A list of permitted file extensions
$allowed = array('docx');

//echo "<pre/>";print_r($_FILES); die;

if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){

$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

if(!in_array(strtolower($extension), $allowed)){
echo '{"status":"error"}';
exit;
}

if(move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name'])){
echo '{"status":"success"}';
exit;
}
}

echo '{"status":"error"}';
exit;

Сейчас:

У меня есть простой код загрузки файла через jquery а также php (работает отлично).

Теперь, что я хочу, после загрузки файла, когда он приходит в качестве ответа, я хочу показать документ с использованием API для моего <div id = "myid" style = "height:500px;width:600px;"></div> (без обновления)

Итак, что я попробовал:

$('#myid').html("http://docs.google.com/gview?url=http://loalhost:8888/Grade/uploads/IEP Form-1.docx&embedded=true");

(ссылка была изменена по соображениям безопасности, но на сервере доступен docx, и я могу открыть ее напрямую)

Но, очевидно, это не сработает.

Так как я могу это сделать?

полный код не нужен. Дайте мне знать, если это возможно, я попробую сам.

Примечание: пожалуйста, не предлагайте улучшение кодирования (не имеет значения сейчас, я улучшу это позже).

-3

Решение

Обычно вы делаете:

if(response.status == 'success'){
$('#myid').load("http://docs.google.com/gview?url=http://loalhost:8888/Grade/uploads/IEP Form-1.docx&embedded=true");
}

Вместо .html (который делает что-то еще).

Однако это вряд ли сработает, поскольку документ, к которому вы обращаетесь, не принадлежит GoogleDocs (могут быть проблемы с несколькими источниками), поэтому убедитесь, что вы разрешаете делать удаленные запросы от Google.

Вместо этого вы можете попробовать

if(response.status == 'success'){
$('#myid').html("<iframe src=\"http://docs.google.com/gview?url=http://loalhost:8888/Grade/uploads/IEP Form-1.docx&embedded=true\"></iframe>");
}

В случае, если Google позволяет встраивать gview в iframes (хотя они могут и не делать).

2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]