js教程

JavaScript進階(八)JS實作圖片預覽並匯入伺服器功能

黄舟

Mar 23, 2017 pm 04:13 PM

JS實現導入檔案功能

在專案開發過程中，需要實現檔案上傳功能。藉此機會學習之。

使用HTML中現有的input type 「file」可以支援此功能。如下圖所示:

瀏覽時只顯示指定檔案類型

type application/msword" >

accept屬性清單
1.accept="application/msexcel"

2.accept="application/msword"

＠

4.accept="application/poscript"

5.accept="application/rtf"

6.accept="applicom/x/pceptycom

8.accept="audio/x-aiff"

9.accept="audio/x-mpeg"

10.accept="audio/x- /realaudio"

1.accept=" waw"

12.accept="image/gif"

13.accept="image/jpeg"

14.accept="image/tiff"

16.accept="image/x-photo-cd"

17.accept="image/x-png"

18.accept="image/x-portablebitmap"

19.accept="image/ x-portable-greymap"

20.accept="image/x-portable-pixmap"

21.accept="image/x-rgb"

21.accept accept ="text/plain"

24.accept="video/quicktime"

25.accept="video/x-mpeg2"

26.ception如何取得檔案的上傳路徑，然後才能進行檔案的讀寫後續操作。

以下是圖片上傳、預覽的Demo:

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
var loadImageFile = (function () { 
if (window.FileReader) { 
var oPreviewImg = null, oFReader = new window.FileReader(), 
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\
/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\
/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 
 
oFReader.onload = function (oFREvent) { 
if (!oPreviewImg) { 
var newPreview = document.getElementById("imagePreview"); 
oPreviewImg = new Image(); 
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px"; 
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px"; 
newPreview.appendChild(oPreviewImg); 
} 
oPreviewImg.src = oFREvent.target.result; 
arr = oPreviewImg.src.toString().split(",");
alert(arr[0]);
alert(arr[1]);
}; 
 
return function () { 
var aFiles = document.getElementById("imageInput").files; 
if (aFiles.length === 0) { return; } 
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; } 
oFReader.readAsDataURL(aFiles[0]); 
} 
} 
if (navigator.appName === "Microsoft Internet Explorer") { 
return function () { 
alert(document.getElementById("imageInput").value); 
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value; 
} 
} 
})(); 
</script> 
<style type="text/css"> 
#imagePreview { 
width: 160px; 
height: 120px; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
</style> 
</head> 
<body> 
<p id="imagePreview"> 
</p> 
<form name="uploadForm"> 
<p> 
<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br /> 
<input type="submit" value="Send" /></p> 
</form> 
</body> 
</html>

測試

通過測試，可獲得文件的格式、編碼方式及編碼內容，如下圖透過閱讀代碼，可以取得到圖片的格式與編碼方式了。接下來就是文件的傳輸了。

經歷了兩天的屈辱、不甘、痛苦掙扎，自己最後還是頑強的站了起來。

晚上回到宿舍繼續掙扎，慢慢思路得以理清：在獲取到圖片的Base64編碼格式之後，自己就聯想到了之前寫過的文件傳輸代碼了，當然之前寫的都是一些基本的文件操作。由此，自己聯想，在這使用最原始的文件傳輸方法應該也可以實現。

早上到實驗室，自己先嘗試將圖片的Base64編碼傳輸至服務端，在服務端接收到客戶端傳輸來的Base64編碼後，採用Base64Img工具包(點擊下載工具包)將Base64圖片編碼轉換為圖片格式，並儲存至指定位置。初次嘗試，將圖片檔案儲存至本地是沒有問題的。經過一些細微的細節問題，將程式部署在阿里雲端伺服器上，經過測試，SUCCESS!

核心程式碼

html

<p style="padding-top: 15px">
<label for="pic">更新广告图片 :</label>
<!-- <a class="btn btn-warning btn-sm" id="choice" ng-click="doChoice()" style="font-size:14px; 
color:red; font-family:微软雅黑; border-radius: 9px;">选择文件</a> -->
<input id="imageInput" type="file" accept="image/jpeg" 	    	onchange="loadImageFile();" />
<i id="img" hidden="hidden"></i>
<i id="imgName" hidden="hidden"></i>
</p>

javaScriptScript

arr = oPreviewImg.src.toString().split(",");
document.getElementById("img").innerHTML = arr[1];
document.getElementById("imgName").innerHTML = 	  	document.getElementById("imageInput").files[0].name;
//alert(document.getElementById("img").innerHTML);
//alert(document.getElementById("imageInput").files[0].name);// 获取   	图片名称(PS:瞬间感觉自己好聪明啊~~)
//alert(arr[0]);// 获取图片格式与编码方式
//alert(arr[1]);// 获取图片Base 64编码字节

程式截圖

服務端廣告管理介面:

服務端修改廣告訊息介面:

結語

到，

自己也曾嘗試過使用ng插件ng-file-upload(見參考文獻1)，但最終還是以失敗而告終，真心沒有搞明白代碼，仿照源代碼寫就是沒有效果，而且佈局也不對，自己也是汗顏了。

自己接下來要突破的問題就是分頁了，對於剛接觸到的知識，往往不明覺厲。

以上就是JavaScript進階(八)JS實作圖片預覽並導入伺服器功能的內容，更多相關內容請關注PHP中文網（www.php.cn）！

用HTML5輕鬆實現圖片預覽

詳解html5圖片上傳支援圖片預覽壓縮及進度顯示相容IE6及標準瀏覽器

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。