전체 페이지를 새로 고치지 않고 이미지를 업로드하기 위해 iframe을 사용하는 예-PHP开发-php.cn

전체 페이지를 새로 고치지 않고 이미지를 업로드하기 위해 iframe을 사용하는 예

高洛峰

풀어 주다： 2016-12-06 14:48:19

원래의

1571명이 탐색했습니다.

업로드된 이미지의 즉시 미리보기 기능을 자주 사용합니다. 구현 방법은 여러 가지가 있습니다. 대부분은 flash+js로 구현됩니다. 오늘은 플래시나 온라인 플러그를 사용하고 싶지 않은 동료를 만났습니다. -ins 그래서 해결책을 제시했습니다. 방법:

아이디어:

1. 페이지의 업로드된 이미지 부분을 iframe에 넣습니다. 삽입된 페이지의 스타일과 일치하도록 스크롤 막대를 설정하고 필요에 따라 고정 크기를 설정합니다.

2. 제출 후 원본 페이지(지정된 페이지)로 돌아갑니다. iframe으로) 서버에서 방금 업로드한 이미지의 주소를 다시 가져와서 상위 페이지의 js 코드를 호출하여 이미지를 로드합니다

3. 진행률 표시줄 등의 효과가 필요한 경우, 이후 양식이 제출되고 서블릿 측에 진행률 표시줄이 출력된 다음 js 스크립트를 계속 보내고 호출하여 페이지 콘텐츠를 시간에 맞춰 변경합니다. 취소 등 기타 기능은 Push를 참고하세요

다음 코드는 기본 파일 업로드를 구현합니다.

index.jsp page_uploadpic.jsp에 파일 업로드 페이지가 내장되어 있습니다

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>
 
 
...

로그인 후 복사

_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>
 
 
...

로그인 후 복사

servlet: (이미지 업로드를 처리하는 서블릿)

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

로그인 후 복사

위의 iframe을 사용하여 전체 페이지를 새로 고치지 않고 이미지를 업로드하는 예는 편집자가 공유합니다. 당신을 위한 모든 콘텐츠