Beispiel für die Verwendung von iframe zum Hochladen von Bildern, ohne die gesamte Seite zu aktualisieren
- 高洛峰Original
- 2016-12-06 14:48:191495Durchsuche
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='"+imgPath+"'/>";
}
</script>
<body>
<iframe scrolling="no"width="300" height="100" src="_uploadpic.jsp"></iframe>
<!-- use to show img(uploaded) -->
<div id="show_img_div"></div>
...
_uploadpic.jsp:
...
<body onload="javascript:window.parent.showUploadImg('${img}');"><!--'${img}' 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>
...
Servlet: (Servlet, das Bild-Uploads verarbeitet)
//处理上传的图片
.... 代码多 此处略去
//把刚上传的图片在服务器中的地址返回到客户端
request.setAttribute("img",request.getContextPath()+"/img/mm.jpg");// '/img/mm.jpg'表示刚上传图片在服务器中的地址
request.getRequestDispatcher("/_uploadpic.jsp").forward(request, response);
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