Beispiel für die Verwendung von iframe zum Hochladen von Bildern, ohne die gesamte Seite zu aktualisieren-PHP开发-php.cn

Beispiel für die Verwendung von iframe zum Hochladen von Bildern, ohne die gesamte Seite zu aktualisieren

高洛峰

Freigeben： 2016-12-06 14:48:19

Original

1551 Leute haben es durchsucht

Ich nutze oft die Funktion der sofortigen Vorschau hochgeladener Bilder. Die meisten davon werden mit Flash+js implementiert. Heute habe ich einen Kollegen getroffen, der weder Flash noch Online-Plugin verwenden wollte -ins, also habe ich ihm eine Lösung gegeben:

Idee:

1. Der hochgeladene Bildteil der Seite ist so eingestellt, dass er keine Ränder hat Bildlaufleisten, passend zum Stil der eingebetteten Seite, und legen Sie nach Bedarf eine feste Größe fest

2. Senden Sie das Formular zum Hochladen von Bildern im Iframe zurück durch den iframe) und rufen Sie die Adresse des gerade vom Server hochgeladenen Bildes zurück und rufen Sie den js-Code der übergeordneten Seite auf, um das Bild zu laden

3 Wenn Sie Effekte wie Fortschrittsbalken benötigen, danach Senden Sie das Formular ab, geben Sie den Fortschrittsbalken auf der Servlet-Seite aus und senden und rufen Sie dann weiterhin JS-Skripte auf, um den Seiteninhalt rechtzeitig zu ändern. Weitere Funktionen wie das Abbrechen finden Sie unter Push

Der folgende Code implementiert den grundlegenden Datei-Upload:

Eine Datei-Upload-Seite ist in index.jsp page_uploadpic.jsp eingebettet

index.jsp:

...
 
 <script type="text/javascript">
 /*
param imgPath:img path of uploaded
 
this function will show the uploaded img in div(id=show_img_div)
 */
 function showUploadImg(imgPath){
if(imgPath=="")return;
document.getElementById("show_img_div").innerHTML="<img src=&#39;"+imgPath+"&#39;/>";
}
 </script>
 <body>
 <iframe scrolling="no"width="300" height="100" src="_uploadpic.jsp"></iframe>
<!-- use to show img(uploaded) -->
<div id="show_img_div"></div>
 
 
...

Nach dem Login kopieren

_uploadpic.jsp:

...
 
<body onload="javascript:window.parent.showUploadImg(&#39;${img}&#39;);"><!--&#39;${img}&#39; request或者session中的图片地址(从服务器传递来的) -->
<form method="post" id="upload_form" action="${pageContext.request.contextPath }/servlet/IframeTestImageServlet" enctype="multipart/form-data">
  <input type="file" name="pic"/><br/><input type="submit" value="upload"/>
  </form>
</body>
 
 
...

Nach dem Login kopieren

Servlet: (Servlet, das Bild-Uploads verarbeitet)

//处理上传的图片
 
.... 代码多 此处略去
 
   //把刚上传的图片在服务器中的地址返回到客户端
 
request.setAttribute("img",request.getContextPath()+"/img/mm.jpg");// &#39;/img/mm.jpg&#39;表示刚上传图片在服务器中的地址
request.getRequestDispatcher("/_uploadpic.jsp").forward(request, response);

Nach dem Login kopieren

Das obige Beispiel der Verwendung von iframe zum Hochladen von Bildern ohne Aktualisierung der gesamten Seite wird vom Herausgeber geteilt Alle Inhalte für Sie