input標簽處理多文件上傳

来源:https://www.cnblogs.com/Alice-Xu/archive/2018/03/13/8559216.html
-Advertisement-
Play Games

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scal ...


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<title>多個文件上傳</title>

</head>

 

<body>

<div style="height: 100px; width: 100px; border: 1px solid red; position: relative;">

點擊上傳

<input onchange="uploadFile()" id="upload" multiple="multiple" type="file" accept="image/*;capture=camera" style="height: 100px;width: 100px;opacity: 0;position: absolute;top: 0;left: 0;" />

</div>

 

<script>

function uploadFile() {

var input = document.getElementById('upload');

  var files = Array.prototype.slice.call(input.files);

  files.forEach(function(file, i) {

      var reader = new FileReader();

    reader.onloadend = function(e) {

    var baseFileStr = this.result.substring((13 + file.type.length),this.result.length);

    console.info("輸出文件數據");

    console.info(baseFileStr);

    }

    reader.readAsDataURL(file);

  });

}

</script>

 

</body>

</html>

 

 

>>>輸出文件數據

>>>iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2...


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 屬性: float 浮動 浮動的內容用div包起來,給div設置寬高 clear 清除浮動。 box-sizing 標準模式下的盒模型 content-box:(預設屬性) padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、 ...
  • 1.去重 for(var q = 0;q<jsonArr.length;q++){ for(var e=0;e<jsonArr[q].data.length;e++){ var matchCode = jsonArr[q].data[e]; var chua = jsonArr[q].jsonObj ...
  • 一. 在JavaScript中,一切皆對象,每個對象都有一個原型對象(prototype),而指向該原型對象的內部指針則是__proto__。當我們對對象進行for in 或者for of遍歷時,就會通過__proto__依次遍歷對象關聯的所有對象。這就是原型鏈,遍歷所有對象的父對象直到object ...
  • 第一次寫博客也不知怎麼寫,反正就按照我自己的想法來吧!怎麼說呢?還是不要扯那些多餘的話了,直接上正題吧! 第一次用canvas寫游戲,所以挑個簡單實現點的來乾:別踩白塊兒,其他那些怎麼操作的那些就不用再扯了,大家應該都懂,不懂的看到黑色的就點就是了,扯多了我打字手也累,大概。鏈接給你們:http:/ ...
  • npm install -g cnpm --registry=https://registry.npm.taobao.org ...
  • //js判斷當前移動設備平臺 var isiOs = false; var isAndroid = false; var isWindowsPhone = false; if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { isiOS = ...
  • //獲取字元串長度String.prototype.strLen = function() { var len = 0; for (var i = 0; i < this.length; i++) { if (this.charCodeAt(i) > 255 || this.charCodeAt(i ...
  • 各種頁面常見佈局+知名網站實例分析+相關閱讀推薦 閱前必看:本文總結了各種常見的佈局實現,每個方法的優缺點分析往後在github上陸續補充。還有就是這篇文章沒提到的其他佈局,待本人後續想到或遇到定會在github上及時更新。由於文章篇幅較長,排版有些混亂,希望別介意哈。為了方便閱讀,還特意做了個錨點 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...