文字處理的方式變更HTML文件

play around

把資料夾裡面的圖形檔縮小,然後放到頁面。
分成兩種方法,獨立的js(不要內嵌在html ) 和配合html.

獨立的js

瀏覽器碰到 <img>標籤時的工作流程:

sequenceDiagram participant client participant server client->>server: img request by GET server->>client: response to GET with image data

這一段程式碼是從原來的(insert_pic_1.html)獨立出來

做法:在 DEV TAB上的SOURCE-FileSystem-單獨存放(例如,along.js.
目的是解釋
HTML 標籤<img> 會產生HTML request GET ，此時，並沒有http server 可以回應,因此,雖然js 的執行沒有產生錯誤,但是，參看主控台，會產生GET的網路錯誤。

修正方法1

兩個步驟

設定HTTP 伺服器 - 安裝web server for chrome
修改程式碼，向主機要檔案,http://localhost:8887

原來的程式碼:

for (var i=0;i<25;i++)
{
  var s ="0000000"+i.toString();  //兩個字串相加
  s=s.slice(-4);  //slice切字串 ，只保留最後4個,s 是影像圖形的檔案名稱，沒有副檔名
  s= '<img src="' +s +'.jpg" width="30%" height="30%" >';
  document.write(s);
}

對應的標籤為
<img src="0000.jpg" width="30%" height="30%" >

上面這段程式碼，只有在html中，才能執行，否則因為安全行，會被chrome(browser)阻擋。

修改成這樣

for (var i=0;i<25;i++)
{
  var s ="0000000"+i.toString();  //兩個字串相加
  s=s.slice(-4);  //slice切字串 ，只保留最後4個,s 是影像圖形的檔案名稱，沒有副檔名
  s= '<img src=http://localhost"' +s +'.jpg" width="30%" height="30%" >';
  document.write(s);
}

<img src="http://localhost/0000.jpg" width="30%" height="30%" >

修正方法2

<html>
<head>

</head>
<body>

<script src='along.js'></script>
</body>
</html>

by select file to show

說明和測試檔案

從 file_name_test.hmtl 到 file_name_test_3.html。

最後完成檔案

test 1只是看看事件,和觸發函數,參考。

多個檔案

test 2

但是問題是,沒有路徑名稱,所以如果,我們的HTML檔案,和圖形不在同個子目錄下面,無法利用之前的方式，例如
img src="位置" 開啟圖檔。

補充

參考

可以選擇檔案的HTML標籤

<input type=file>

file_name_test.html

<head>
<script>
function loadImg(e){
 console.log(e.files[0]);
}
</script>

</head>
<body>
<input type="file" onchange="loadImg(this)" multiple="true">
<img id="img">


</body>
</html>

file_name_test_2.html

<head>
<script>
function loadImg(e){
 for (var i=0;i<e.files.length;i++)
 {
  console.log(e.files[i]);
 }
}
</script>

</head>
<body>
<input type="file" onchange="loadImg(this)" multiple="true">
<img id="img">


</body>
</html>

file_name_test_3.html

<head>
<script>
function loadImg(e){
 for (var i=0;i<e.files.length;i++)
 {
  
document.write('<img src="'+ e.files[i].name + '" width="30%" height="30%">');  
 }
}
</script>

</head>
<body>
<input type="file" onchange="loadImg(this)" multiple="true">
<img id="img">


</body>
</html>