利用HTML5上傳檔案並顯示在前端預覽，以圖片為例

阿新 • • 發佈：2018-12-23

由於專案中有上傳檔案的功能，所以這次單獨拿出來研究研究，我上網查了查，以前都是用iframe，但是自從HTML5出世之後，就可以利用H5的一些特性來上傳檔案了，啥也不說了，我上程式碼了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5實現上傳</title>
    <style type="text/css">
        #result{
            width: 200px;
            height 
:112px;
            border:1px solid #eee;
        }
        #result img{
            width: 200px;
        }
        input{
            width: 70px;
            margin-top: 10px;
        }
        @-moz-document url-prefix() { input { width:65px; } }/*單獨對火狐進行設定*/
    </style>
</head>
<body> 

    <div id = "result"></div>
    <input id="pic" type="file" name = 'pic' accept = "image/*" onchange = "selectFile()"/>
    <!-- <button onclick = "handIn()">提交</button> -->
    <script type="text/javascript">
        //var files = document.getElementById('pic').files; 

        var form = new FormData();//通過HTML表單建立FormData物件
        var url = '127.0.0.1:8080/'
        function selectFile(){
            var files = document.getElementById('pic').files;
            console.log(files[0]);
            if(files.length == 0){
                return;
            }
            var file = files[0];
            //把上傳的圖片顯示出來
            var reader = new FileReader();
            // 將檔案以Data URL形式進行讀入頁面
            console.log(reader);
            reader.readAsBinaryString(file);
            reader.onload = function(f){
                var result = document.getElementById("result");
                var src = "data:" + file.type + ";base64," + window.btoa(this.result);
                result.innerHTML = '<img src ="'+src+'"/>';
            }
            console.log('file',file);
            ///////////////////
            form.append('file',file);
            console.log(form.get('file'));
        }
        //var xhr = new XMLHttpRequest();
        // function handIn(){
        //  console.log(form.get('file'));
        //  xhr.open("post", url, true);
        //  xhr.addEventListener("readystatechange", function() {  
        //      var result = xhr;  
        //      if (result.status != 200) { //error  
        //          console.log('上傳失敗', result.status, result.statusText, result.response);  
        //      }   
        //      else if (result.readyState == 4) { //finished  
        //          console.log('上傳成功', result);  
        //      }  
        //  });   
        // }
    </script>
</body>
</html>

結果如下
這裡寫圖片描述

這裡寫圖片描述

下面被我註釋的是通過AJAX上傳檔案，把檔案傳到後臺的程式碼，由於沒有後臺介面供我測試，url也不對，所以只能寫成這樣了
下面附上input中的“type = file” 中accept屬性的一些配置，上傳什麼檔案配置什麼設定都在下邊

Extension MIME Type
.xlsx   application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltx   application/vnd.openxmlformats-officedocument.spreadsheetml.template
.potx   application/vnd.openxmlformats-officedocument.presentationml.template
.ppsx   application/vnd.openxmlformats-officedocument.presentationml.slideshow
.pptx   application/vnd.openxmlformats-officedocument.presentationml.presentation
.sldx   application/vnd.openxmlformats-officedocument.presentationml.slide
.docx   application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dotx   application/vnd.openxmlformats-officedocument.wordprocessingml.template
.xlsm   application/vnd.ms-excel.addin.macroEnabled.12
.xlsb   application/vnd.ms-excel.sheet.binary.macroEnabled.12
/////////////////////////////////////////////////////////////////////////////////////////////////////
字尾名       MIME名稱
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

利用HTML5上傳檔案並顯示在前端預覽，以圖片為例

由於專案中有上傳檔案的功能，所以這次單獨拿出來研究研究，我上網查了查，以前都是用iframe，但是自從HTML5出世之後，就可以利用H5的一些特性來上傳檔案了，啥也不說了，我上程式碼了 <!DOCTYPE html> <html lang

C#在WinForm下使用HttpWebRequest上傳檔案並顯示進度

這段時間因專案需要，要實現WinForm下的檔案上傳，個人覺得采用FTP方法太麻煩，還得配置FTP伺服器，要通過防火牆也是一個麻煩。本來打算採用WebClient方法，但是採用這個方法實現後，進度條很短時間後就達到最大值，要等待一段時間才能傳送完畢，要是檔案太大（我這裡測試約

原生JS實現ajax上傳檔案並顯示進度條

html程式碼 <progress id="progressbar" value="0" max="100" style="width:300px;"></progress>

form+iframe+file 頁面無重新整理上傳檔案並獲取返回值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><but

基於SSM框架實現利用FTP上傳檔案至Linux遠端伺服器

基於SSM框架實現利用FTP上傳檔案至Linux遠端伺服器摘要：JavaWEB開發通常採用SSM框架，在完成web開發時經常涉及到遠端訪問Linux伺服器實現檔案上傳。通常實現檔案上傳可通過InputStream和OutputStream實現檔案讀寫操作，但對於Linux伺服器需要

上傳檔案並匯入資料庫

選擇檔案上傳並匯入資料庫 file_put_contents — 將一個字串寫入檔案語法：int file_put_contents ( string $filename , mixed $data [, int $flags = 0 [, resource $context ]] ) 返

利用SpringMVC上傳檔案的Demo

前言：檔案的上傳功能也在網站中發揮著不可替代的作用，這裡我就來講講簡單利用SpringMVC實現檔案的上傳。這裡我的配置是這樣的： idea+maven+tomcat9+jdk8 我也將該專案的D

bootstrap-fileinput上傳完檔案後再開啟上傳檔案介面顯示取消按鈕

Bootstrap File Input是一款基於bootstrap框架的html5上傳檔案外掛，具體展示效果如下：使用時常見配置如下： $(".multipleFileUpload").fileinput({ &n

PHP利用FTP上傳檔案

簡單示例： $ftpfile = $_FILES['userfile'];//檔案資訊 $conn = ftp_connect('127.0.0.1', 21, 90);//替換為自己的IP ftp_login($conn, 'user', 'password');//替

form上傳檔案並獲取返回值

原理：頁面寫一個隱藏的iframe，form的target指向這個iframe，在iframe的load事件中獲取返回結果。  <form action=""

form表單上傳檔案並返回上傳結果

注意：這是JS的程式碼，且這個script標籤是在body裡面的（放在head裡是沒有反應的） <script type="text/javascript"> function GetBrowserIsIE() { var obj = '';

SpringMVC上傳檔案進度顯示

效果圖： FileUploadController.java import java.io.File;

Windows遠端連線Ubuntu，上傳檔案並執行matlab

在管理實驗室（中國海洋大學視覺實驗室）伺服器的過程中，經常有同學會找管理員詢問如何在Windows系統下，遠端連線Ubuntu系統，上傳檔案至伺服器，並執行matlab程式碼。現將步驟總結如下：（1）配置系統，使得Windows系統可以遠端連線Ubuntu系統（2）通過wi

java ssh上傳視訊並顯示縮圖以及視訊在網頁中的播放

非原創，整合網上的各個步驟及自己的實施一.上傳視訊使用以下htm標籤即可 <form name="uploadForm" method="post" enctype="multipart/form-data" action="xxx" <td><input

關於web專案中的圖片上傳、並顯示問題

一、資料庫儲存直接把圖片的二進位制碼存到資料庫參考blog: 直接存圖片在mysql上面有兩點好處: 比較容易做取重,就是相同的圖片只存一份.最重要備份使用資料庫的備份方式簡單.容易管理,去掉無用的圖片等. 缺點: 不適合超大量儲存,資料的儲存越大,恢復越麻煩當然

使用WebClient上傳檔案並同時Post表單資料欄位到服務端

之前遇到一個問題，就是使用WebClient上傳檔案的同時，還要Post表單資料欄位，一開始以為WebClient可以直接做到，結果發現如果先Post表單欄位，就只能獲取到欄位及其值，如果先上傳檔案，也只能獲取到上傳檔案的內容。測試了不少時間才發現WebClient不能這麼使用。 G

利用Servlet上傳檔案(在servlet中處理MIME型別的post資料)

一、得到HTTP請求訊息的內容下面是一個純JAVA的應用程式，它可以獲取表單提交時請求訊息的全部內容，該程式將請求訊息的內容顯示在螢幕上同時寫入程式執行路徑的一個名為request.txt的文字檔案中。該程式涉及到JAVA的基本知識：Socket程式設計

[C#]使用WebClient上傳檔案並同時Post表單資料欄位到服務端

{ this.lblAmigoToken =new System.Windows.Forms.Label(); this.txtAmigoToken =new System.Windows.Forms.TextBox(); this

django 使用者註冊時使用modelform上傳頭像並顯示在頁面

在寫使用者註冊時，除了新增使用者名稱，密碼，暱稱，郵箱等，再新增使用modelform上傳頭像的功能，並且在登入（django已經為我們寫好了登入功能的全部程式碼）之後頭像顯示在頁面1.伺服器端安裝pillowpip install pillow2.新增圖片欄位到使用者mod

C# 上傳檔案並生成縮圖

#region 上傳檔案並生成縮圖 /// <summary> /// 上傳檔案並生成縮圖 /// </summary> /// <param name

利用HTML5上傳檔案並顯示在前端預覽，以圖片為例

相關推薦