docx ohne Seitenaktualisierung anzeigen

Question

Ich bin neugierig zu wissen, dass es möglich ist, eine docx Datei (die auf dem Server verfügbar ist) in einem div zu zeigen, ohne diese Seite zu aktualisieren (google doc viewer API oder eine andere Möglichkeit).

Lassen Sie mich meine Forderung klar: -

HTML + JQUERY Code:

<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-Code:

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

Jetzt:

Ich habe einfachen Datei-Upload-Code über jquery und php (funktioniert einwandfrei).

Nun, was ich will, ist, nach dem Upload-Datei, wenn es Erfolg als Antwort kommt dann möchte ich eine doc-Datei zeigen, mit API meiner <div id = "myid" style = "height:500px;width:600px;"></div> (ohne Refresh)

Also, was ich versucht:

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

(Linksetzung verändert aus Sicherheitsgründen aber docx ist auf dem Server zur Verfügung, und ich bin in der Lage es direkt zu öffnen)

Aber offensichtlich wird es nicht funktionieren.

Also wie kann ich das tun?

vollständiger Code wird nicht benötigt. Lass es mich wissen, wenn es möglich ist, werde ich es selbst versuchen.

Hinweis: Bitte schlagen Sie keine Kodierungsverbesserung vor (nicht wichtig, ich werde das später verbessern).

Answer 1

Normalerweise würden Sie tun:

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

Statt .html (was tut etwas anderes).

Es ist jedoch unwahrscheinlich, dass es funktioniert, weil das Dokument, auf das Sie zugreifen, nicht von GoogleDocs verwaltet wird (es kann Probleme mit Herkunft geben). Stellen Sie daher sicher, dass Remoteanfragen von Google zulässig sind.

Stattdessen könnten Sie versuchen,

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

Bei Google ermöglicht in iframes von gview Einbetten (obwohl sie auch nicht).