国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

form表單的file文件上傳那些事

GeekGhc / 784人閱讀

摘要:客戶端直接訪問用戶計算機的文件以前在表單添加了字段是為給開發(fā)提供安全的方式以便在客戶端更好訪問用戶的文件字段的基礎(chǔ)上加了一些直接訪問文件信息的接口集合與類型讀取文件的數(shù)據(jù)集合本地文件的名稱文件的字節(jié)大小字符文件的類型文件上次修改的時間實現(xiàn)

file API
  客戶端直接訪問用戶計算機的文件,2000以前,在表單添加了字段.  
  file API是為給web開發(fā)提供安全的方式,以便在客戶端更好訪問用戶的文件,字段的基礎(chǔ)上加
了一些直接訪問文件信息的接口-files集合.與fileReader類型讀取文件的數(shù)據(jù).
files集合
name: 本地文件的名稱  
size: 文件的字節(jié)大小  
type: 字符、文件的MIME類型  
lastModifiedDate: 文件上次修改的時間(chrome實現(xiàn)了這屬性)
fileReader類型
    readAsText(file, encoding): 以純文本的方式讀取文件.
    readAsDataURL(file): 讀取文件并以URL的形式保存在result屬性中.  
    readAsBinaryString(file): 讀取文件并將一個字符串將保存在result屬性中,一個字符
為一個字節(jié).
    readAsArrayBuffer(file): 讀取文件并將一個包含文件內(nèi)容的ArrayBuffer保存在
result屬性中.  
    (file-文件集合; encoding-編碼類型)
事件
    由于數(shù)據(jù)是異步讀取.因此fileReader提供了幾種事件.
    progress事件: 每~50ms,便觸發(fā)一次.
    error事件: 但文件無法讀取就會觸發(fā),有個屬性error.code屬性.1表示未找到文件,2表示
安全性錯誤,3表示讀取中斷,4表示文件不可讀,5表示編碼錯誤.  
    load事件: 觸發(fā)但文件完整讀取后.
    中斷了還會觸發(fā)abort事件,在load、error事件后還會觸發(fā)loadend事件.
栗子
當用戶上傳完圖片之后,可在頁面立即顯示.
//html

//js
function showFileImg(ele, dist){
    const filesList = document.querySelector(ele);
    const output    = document.querySelector(dist);
    
    filesList.addEventListener("change", function(event) {
        //實例fileReader對象
        const reader = new FileReader();
        //獲取文件集合
        let files  = event.target.files[0];
       
        if(/image/.test(files.type)){
            //讀取文件并通過URL類保存在result里
            reader.readAsDataURL(files);
            //事件
            reader.onload = function(){
                //獲得圖片數(shù)據(jù)并插進顯示節(jié)點
                let html = ""
                i++;
            }
            output.innerHTML = info;
        }
    } 

    droptarget.addEventListener("dragenter", handleEvent);
    droptarget.addEventListener("dragover", handleEvent);
    droptarget.addEventListener("drop", handleEvent);
}
dropFile();
使用XHR上傳文件
//html



//js
function xhrFile(){
    const file     = document.querySelector("#file");
    const sendFile = document.querySelector("#sendFile");
    
    //文件信息
    let files;
    
    //獲得文件信息
    function getFileInfo(event){
        let files = event.target.files[0];
    };
    //發(fā)送xhr
    function sendFileXhr(event){
        //實例對象
        let data = new FormData();
        let i    = 0;
        let len  = files.length;
        //遍歷文件信息
        while(i < len){
            data.append("file" + i, files[i]);
            i++;  
        }
        //實例請求對象
        let xhr = new XMLHttpRequest();
        xhr.open("post", "......php", true);
        //請求成功打印放回信息
        xhr.onreadystatechange = function() {
            if(xhr.readystate === 4){
                alert(xhr.responseText);
            }    
        }
        xhr.send(data);
    };
}
xhrFiles()

對象formData可通過鍵值模擬一系列的表單,通過xhr的send提交數(shù)據(jù).

formdata append

new FormData(form? : HTMLFormElement);
給這對象加鍵值
append(name, value, filename);
name: 字段名稱
value: 字段數(shù)值
filename: 文件的文件名(可選).

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/82926.html

相關(guān)文章

  • form表單file文件上傳那些

    摘要:客戶端直接訪問用戶計算機的文件以前在表單添加了字段是為給開發(fā)提供安全的方式以便在客戶端更好訪問用戶的文件字段的基礎(chǔ)上加了一些直接訪問文件信息的接口集合與類型讀取文件的數(shù)據(jù)集合本地文件的名稱文件的字節(jié)大小字符文件的類型文件上次修改的時間實現(xiàn) file API 客戶端直接訪問用戶計算機的文件,2000以前,在表單添加了字段. file API是為給web開發(fā)提供安全的方式,以便...

    LinkedME2016 評論0 收藏0
  • 文件上傳二三

    摘要:選擇文件談到文件上傳,不得不提,中文名叫表單。當需要使用回調(diào)函數(shù)來處理上傳完成后后端返回的數(shù)據(jù)時,需要和后端預(yù)先達成約定,如,回調(diào)函數(shù)名,參數(shù)列表,等等。后端可以根據(jù)邊界的檢驗,識別上傳的文件,讀取元數(shù)據(jù)中的文件屬性,從而為驗證提供數(shù)據(jù)。 引子 其實很早就開始醞釀這一篇了,無奈總是發(fā)現(xiàn)有缺漏的地方,遂努力惡補前端+后端+底層相關(guān)知識。今天終于可以發(fā)表了。 --跟生孩子一樣啊。 選擇文...

    wudengzan 評論0 收藏0
  • 7.1、使用Commons Fileupload上傳文件

    摘要:你可以通過在應(yīng)用程序上下文中添加一個解析器來啟用的處理。當?shù)臋z測到一個請求時,它會激活你聲明好的解析器,然后把這個解析器轉(zhuǎn)交給請求。解析器會把當前的扭曲為一個支持文件上傳的。首先,創(chuàng)建一個帶有的表單,這樣用戶就可以通過這個表單上傳文件了。 ??最近家里的網(wǎng)出現(xiàn)了莫名其妙的問題,連不上碼云了,所以把示例遷到了 github 上。本示例見這個項目的 master 分支的 ZestMulti...

    suosuopuo 評論0 收藏0
  • [未完待續(xù)] 上傳文件這件,蛋疼何止一點點!

    摘要:在做時,不可避免地要上傳一些文件,最常用到的就是圖片。提供電子郵件服務(wù)的站點,除了圖片還需要上傳文檔等其他類型文件的功能。當點擊所看到的按鈕時,實際點擊的是原生上傳控件,這樣一來就觸發(fā)了瀏覽器默認行為,即打開選擇文件對話框。 在做 Web App 時,不可避免地要上傳一些文件,最常用到的就是圖片。在線相冊及圖片收藏網(wǎng)站等以提供圖片存儲服務(wù)的站點自不用說,社交網(wǎng)絡(luò)的頭像、發(fā)布信息等都需要...

    tinyq 評論0 收藏0
  • Ajax上傳文件

    摘要:我們將教你一個請求上傳多文件的例子。然而,你可以用同樣的辦法上傳單個文件。在功能方面的進步,消除供開發(fā)者使用第三方瀏覽器插件來處理文件上傳的需要。 AJAX的采用標志著的Web歷史上的一個巨大飛躍。與Web服務(wù)器通信而不需要重新加載頁面的能力已改變了Web應(yīng)用程序構(gòu)建。動態(tài)網(wǎng)站的概念形成以后,AJAX(XMLHttpRequests) 技術(shù)發(fā)展迅速。 近年來XMLHttpRequest...

    Warren 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<