2. 程式人生 > >input[type=file] 獲取上傳檔案的內容

input[type=file] 獲取上傳檔案的內容

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

上程式碼：

<input type="file" name="file" id="fileUpload">

jquery：

   $("#fileUpload").change(function () {
        console.log($("#fileUpload")[0].files);
    });

列印結果：
在這裡插入圖片描述

input file 讀取檔案內容

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
 

    <script src="js/jquery.min.js" type="text/javascript"></script>  
    <script type="text/javascript">        
        if(typeof FileReader == "undified") {
            alert("您老的瀏覽器不行了！");
        }
        function showDataByURL() {
            var resultFile = document.getElementById
 
("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();                
                reader.readAsDataURL(resultFile);
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById
 
("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
                }; 

            }

        } 
        function showDataByBinaryString() {
              var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();
                //非同步方式，不會影響主執行緒
                reader.readAsBinaryString(resultFile);

                reader.onload = function(e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }
        function showDataByText() {
            var resultFile = document.getElementById("fileDemo").files[0];
            if (resultFile) {
                var reader = new FileReader();

                reader.readAsText(resultFile,'UTF-8');
                reader.onload = function (e) {
                    var urlData = this.result;
                    document.getElementById("result").innerHTML += urlData;
                };
            }
        }
    </script>
</head>
<body>
    <input type="file" name="fileDemo" id="fileDemo" multep/>
    <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
    <input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>
    <input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>
    <div id="result">

    </div>

</body>
</html>

監聽input上傳檔案，獲取檔名稱

在這裡插入圖片描述

<div class="import-box pr" >
    <span class="model-address-txt">匯入檔案：</span>
    <input type="text" class="address-input Js_address-input input-wid" readonly>
    <label class="file-box" for="file">
        <span class="look-file">瀏覽</span>
        <input id="file" type="file" class="file-input Js_file-input" >
    </label>
</div>

//監聽input
$(".Js_file-input").on("change",function (e) {
   var e = e || window.event;
   //獲取 檔案 個數 取消的時候使用
   var files = e.target.files;
   if(files.length>0){
       // 獲取檔名 並顯示檔名
       var fileName = files[0].name;
       $(".Js_address-input").val(fileName);
   }else{
       //清空檔名
       $(".Js_address-input").val("");
   }
});

獲取event下的target的name值，利用length為判斷條件，小夥伴，可以先列印一下看看，這樣利於理解，不喜勿噴！謝謝

相關推薦

input[type=file] 獲取上傳檔案的內容

上程式碼： <input type="file" name="file" id="fileUpload"> jquery： $("#fileUpload").change(function () { console.log($("#fileUp

[置頂]關於使用input type=file 標籤上傳檔案的注意細節(上傳檔案 無法獲取檔案 問題)

首先確定服務端使用的是C#。其他語言我沒測試 第一、建立一個form，就像這樣 <form method="post" enctype="multipart/form-data" action=

input type file onchange上傳文件的過程中，同一個文件二次上傳無效的問題。

type=file cnblogs change 文件 event eve value get 一個 不要采用刪除當前input[type=file]這個節點，然後再重新創建dom這種方案，這樣是不合理的。解釋如下：input[type=file]使用的是onchange去

<input type=file>上傳唯一控件

驗證 img 獲取 document put 形式 src 必須 sda 值得註意的是：當一個表單裏面包含這個上傳元素的時候，表單的enctype必須指定為multipart/form-data,method必須指定為post，瀏覽器才會認識並正確執行。但是還有一點，瀏覽器

vue form圖片上傳功能，input type="file" 圖片上傳

vue 圖片上傳功能 <template> <div class="file_box "> <span class='upload'>

jquery判斷 input type="file"上傳檔案是否為空

要想獲取type="file"的input內容，用var file = $("id").val();肯定是不行的，下面是程式碼： html上傳按鈕為： <input type="file" id="reportXML" name="reportXML"

Input type="file"上傳檔案change事件只觸發一次解決方案

一、剛開始用法 $(function () { $("#file").change(excelUpload); }) excelUpload()函式內部就是提示是否確認上傳動作，一開始這樣寫只有在第一次選擇上傳檔案的時候觸發了excelUpload函式，顯然這樣是不行的。後來網上有人說快

關於input type=file 獲取檔案的路徑問題

<input type=file />可以獲取檔案的絕對路徑，在不同瀏覽器下，顯示存在相容問題。 在IE下可以獲取絕對路徑，在火狐瀏覽器下獲取的是檔案的名稱。 在ie8以下的執行結果：

ie8及其以下版本相容性問題之input file隱藏上傳檔案

檔案上傳時，預設的file標籤很難看，而且每個瀏覽器下都有很大差距。因此我們基本都把真正的file標籤給隱藏，然後建立一個標籤來替代它。但是由於IE出於安全方面的考慮上傳檔案時必須點選file的瀏覽按鈕選擇檔案才可以把檔案上傳上去。此時我們可以將file inp

http Content-Type 中的boundary搗亂，導致服務端無法獲取上傳檔案

使用 httpcomponents httpclient 4.3.1 上傳檔案時服務端總是返回“需要可用的引數”，這個結果描述是應用自定義的，太過於籠統，得不到任何有用的資訊。後來和伺服器端一起除錯才找到問題的根源。 客戶端傳送的 http Content-Type： C

springMVC獲取上傳檔案

一，通過commons-fileupload.jar來獲取上傳，此時不走Servlet的 api， 在spring的xml檔案配置中，加上 <bean id="multipartResolver" class="org.springframework.web.multipart.

關於php獲取上傳檔案失敗的問題

通過在php檔案中打印出$_FILES['userfile']['error'] 錯誤程式碼，然後根據錯誤程式碼來分析問題。 值：0; 沒有錯誤發生，檔案上傳成功。 值：1; 上傳的檔案超過了 php.ini 中 upload_max_filesize 選項限制的值。 值

HTML5中file方法上傳檔案預覽 示例

效果圖如下：  程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <s

Angularjs ng-file-upload上傳檔案

ng-file-upload angular-file-upload 是一款輕量級的 AngularJS 檔案上傳工具，為不支援瀏覽器的 FileAPI polyfill 設計，使用 HTML5 直接進行檔案上傳。 特性 支援上傳進度，在上傳的時候，可以取消或者中止

input type=file accept中限制檔案型別pdf、doc、docx、 jpg、 png、xls 、xlsx等格式

accept="application/msexcel,application/msword,application/pdf,image/jpeg,image/png,application/vnd.openxmlformats-officedocument.spreads

獲取上傳檔案的字尾名並且判斷是不是圖片格式

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-

獲取input type=file的檔名及input type=file獲取檔名的瀏覽器,設定input type=file樣式

獲取input type=file的檔名方法：        let filePath = $("input[type = 'file']").val();        //獲取路徑        let urlArr = filePath.split("\\");    

Android WebView嵌入H5之file頭像上傳檔案，適配所有版本

 最近公司需要開發新的專案，為了節省時間成本，要求整體嵌入H5介面。對，沒看錯是整體嵌入，心中一萬隻草泥馬奔騰，沒辦法大佬就是大佬，還是的照做。 今天來說說h5上傳頭像的問題吧。網上有很多的解決方案，開始我覺得好像很簡單，都有成功案例，等把程式碼copy下來，發現並不能執

tp5獲取上傳檔案資訊

->getSavename 獲取儲存的檔名 ->getInfo 獲取上傳檔案資訊 ->getMime 獲取檔案的MIME資訊 ->md5 獲取檔案的md5雜湊值 ->sha1 獲取檔

JavaScript獲取上傳檔案的檔名及副檔名

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>獲取上傳檔案的檔名及副檔名</title></head><