Php 显示docx而不刷新页面

我很想知道，是否可以在div中显示

docx

文件（可在服务器上获得），而不刷新该页面（使用googledocviewerapi或任何其他可能的方式）

让我澄清我的要求：-

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

// 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;

上传
$（'.uplaod_file'）。在（'click'，function（）上{
var file_data=$（'#uploaddocfile'）.prop（'files'）[0]；
var ext=file_data.name.split（'.'）.pop（）；
如果（ext=='docx'）{
var form_data=new FormData（）；
表单\数据。追加（'文件'，文件\数据）；
$.ajax({
url:'upload.php'，//指向服务器端php脚本
dataType:'text'，//如果PHP脚本有什么需要的话，那么它将返回什么
cache:false，
contentType:false，
processData:false，
数据：表格数据，
键入：“post”，
成功：函数（php_脚本_响应）{
var response=$.parseJSON（php_脚本_响应）；
如果（response.status==“error”）{
$（'.alert danger'）.css（{'display'：'block'}）；
$（'.alert danger'）.html（'文件上载失败，请重试'）；
}
如果（response.status==“success”）{
$（'#myid'）.html（“http://docs.google.com/gview?url=http://loalhost:8888/Grade/uploads/IEP 表1.docx和embedded=true”）；
}
}
});
}否则{
$（'.alert danger'）.css（{'display'：'block'}）；
$（'.alert danger'）.html（'文件扩展名必须是docx'）；返回false；
}
});

PHP代码：

  <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

// 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;

通常您会：

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>");
}

if（response.status==“success”）{
$（'#myid'）.html（“”）；
}

如果谷歌允许在iFrame中嵌入gview（尽管它们可能不允许）。
否决投票人，请说明原因。如果有人不说明原因就进行否决投票，那真是令人沮丧。