檔案和列印的技巧-上傳圖片以後顯示縮圖

標籤：

————————————————————————

<body style="text-align:center">
        <div id="demo"></div>
        <form action="./upload.html" target="tgt_frame" method="post"
            enctype="multipart/form-data" name="myform">
          <label>
          <input type="file" name="mypic" />
          </label>
          <label>
          <input type="submit" name="Submit" value="提交"/>
          </label>
        </form>
        <iframe id="tgt_frame" name="tgt_frame" style="display:none;"></iframe>
    </body>

————————————————————————

upload.html :

<!DOCTYPE html>
<html>
    <head>
        <title>upload</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript">        
            function init(){

                 //擷取頂層網頁的demo元素，並動態載入一張圖片
                top.document.getElementById(‘demo‘).innerHTML
                    = ‘<img src=".//1.jpg"/>‘;
            }
        </script>    
    </head>
    <body style="text-align:center" onload="init();">
    </body>
</html>

 ————————————————————————————痛點剖析：

  1.把表單提交的目標指向一個架構，而不是當前網頁，這樣可以避免網頁的重新整理。

  2.這個提交網頁的架構不能被使用者看見，因此本例使用css屬性把它隱藏起來

 其他說明：

   執行個體中的opload.html只是一個靜態網頁，它並沒有接受來自用戶端的檔案流，在實際開發中，其一定是一個動態網頁，或者以.php、.jsp、.aspx等結尾的URL

 

 

 

 

檔案和列印的技巧-上傳圖片以後顯示縮圖