如何在该预览图像框中显示任何类型的图像、doc、excel、pdf

Question

我想在该预览图像框中显示图像、doc、excel、pdf。如果有人可以提供帮助，请提供帮助

*{margin:0px; padding:0px;}
 #container{width:20%; padding:2%; box-shadow:0px 0px 10px #888888; margin:10px auto;}
 #image1{width:96% ; padding:2%; border:1px dashed green;}
 #header{background:#405570; color:white;text-align:center; padding:2%;}
 #view-image{border-radius:5px; overflow:hidden;}
 #preview-image{padding:1%; border:1px solid #efefef; height:200px;}

<div id="container"> 
  <form method="post" action="upload_file.php" enctype="multipart/form-data">
  <input type="file" id="image" />
  </form>
  <br>

  <div id="view-image">
   <h3 id="header">Preview Image</h3>
   
   <div id="preview-image">
   image will show right here
   </div>
   
  </div>

 </div>

Answer 1

你可以试试jquery file uplad plugin https://blueimp.github.io/jQuery-File-Upload/