欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關于input type="file"的及其files對象的深度解析

  發(fā)布時間：2023-07-13 16:34:50   作者：豆趣編程   我要評論
我們都知道，html5中有個input type=file元素，用該元素可以實現(xiàn)頁面上傳文件的功能，這篇文章主要介紹了關于input type="file"的及其files對象的深層解析,需要的朋友可以參考下

我們都知道，html5中有個input type=file元素。用該元素可以實現(xiàn)頁面上傳文件的功能

但一般的做法只是簡單的在表單中操作，我來研究一下深層東西

想要了解它，就要知道它的內置對象，files

頁面上寫一個input，然后選倆個圖片，打印這個input對象

$("input[name='file1']").change( function(e){
    console.log($("input[name='file1']"))
})

發(fā)現(xiàn)有下列值，在0中，有一個files對象

我們發(fā)現(xiàn)input選擇的文件被記錄到了這個對象中，這個是fileList對象，是一個只讀對象，不能修改

因為它不能修改，所以很難實現(xiàn)對已選中多個文件的刪除某個文件等操作

里面記錄了文件的name，size，type，和修改時間等，可知這個對象只存放了一些文件的信息，相當于是本地文件的索引，并不是把文件放到input中了，上傳文件時它會再去找到實際的本地文件

fileList數(shù)組包含多個File對象，F(xiàn)ile對象是繼承與Blob對象的，關于file，url,blob，dataUrl可以詳細查查

一般url可以是本地地址，http地址等

blob對象一般的形式是：blob:http://192.168.100.151:8080/1148dcd6-952e-4478-823d-21b37e537c2f，屬于瀏覽器對象

dataUrl 一直格式是：以data:image/jpeg;base64,這種類似形式打頭的一串很長的字符串。

這三種形式在img標簽中src屬性都可以調用。

File對象有name，size,lastModified屬性

File對象的創(chuàng)建：

var file1=new File([blob], "aa.png",{type:"image/jpg"}); //第一個參數(shù)是Blob對象或者dataUrl，第二個參數(shù)是文件名，三個參數(shù)可選，規(guī)定文件類型

注意：第一個參數(shù)必須是對象，不能是轉換成的字符串，比如uniapp或者微信小程序的chooseImage方法返回的blob的url，他是一個字符串，這樣生成的File對象只是將url字符串變成文件了，不是文件本身?。?！

想把blob字符串變成Blob對象，可以用es6的：const blob = await fetch(image.path).then(r => r.blob())

或者用傳統(tǒng)的XHR或者ajax也行，就是把blob對象根據(jù)url給獲取出來就行。

利用這個files對象，我們可以實現(xiàn)很多功能，例如：

一.選擇圖片未經(jīng)后端顯示預覽圖片

方法1：利用window的url工具將文件生成url，再將url賦值給img的src屬性，顯示出選中圖像

順便提一下，input中控制選中類型加一個accept屬性就行了，只會顯示設定的文件類型

<input id="file1" type="file"  name="file1" multiple="multiple" accept=".doc，.jpg">
$('.fbpj-camera').change(function(event) {
	 	//$('.dianpuzhuangxiu .addmokuai .block .shuoming1 .pic .pic1').children().remove();
   		 // 根據(jù)這個 <input> 獲取文件的 HTML5 js 對象
	    var files = event.target.files, file;        
	    if (files && files.length > 0) {
	      // 獲取目前上傳的文件
	      file = files[0];
	      // 來在控制臺看看到底這個對象是什么
	      console.log(file);
	      // 那么我們可以做一下諸如文件大小校驗的動作
	      if(file.size > 1024 * 1024 * 2) {
	        alert('圖片大小不能超過 2MB!');
	        return false;
	      }
	      // !!!!!!
	      // 下面是關鍵的關鍵，通過這個 file 對象生成一個可用的圖像 URL
	      // 獲取 window 的 URL 工具     
	      var URL = window.URL || window.webkitURL;     
	      // 通過 file 生成目標 url
	      var imgURL = URL.createObjectURL(file);
	      // 用這個 URL 產(chǎn)生一個 <img> 將其顯示出來
	      $('.fbpj .container').prev().find("img").attr('src', imgURL);
	      // 使用下面這句可以在內存中釋放對此 url 的伺服，跑了之后那個 URL 就無效了
	      	 //URL.revokeObjectURL(imgURL);
   		 }
  		});

方法二：利用html5的FileReader()讀取文件

*前提是瀏覽器支持的話

if(window.FileReader) {  
    var fr = new FileReader();  
    // add your code here  
}  
else {  
    alert("Not supported by your browser!");  
} 
<script type="text/javascript">  
        function showPreview(source) {  
            var file = source.files[0];  
            if(window.FileReader) {  
                var fr = new FileReader();  
                fr.onloadend = function(e) {  
                    document.getElementById("portrait").src = e.target.result;  
                };  
                fr.readAsDataURL(file);  //也是利用將圖片作為url讀出
            }  
        }  
    </script>  
<input type="file" name="file" onchange="showPreview(this)" />  
                                <img id="portrait" src="" width="70" height="75">

FileReader還有一些其他用法

<html>  
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <meta name="author" content="oscar999">  
  <title></title>  
  <script>  
  function  handleFiles(files)  
  {  
    if(files.length)  
    {  
       var file = files[0];  
       var reader = new FileReader();  
       reader.onload = function()  
       {  
           document.getElementById("filecontent").innerHTML = this.result;  
       };  
       reader.readAsText(file);   //作為字符串讀出
        //reader.readAsText(file,'gb2312');   //默認是用utf-8格式輸出的，想指定輸出格式就再添加一個參數(shù)，像txt的ANSI格式只能用國標才能顯示出來
    }  
  }  
  </script>  
  </head>  
  <body>  
  <input type="file" id="file" onchange="handleFiles(this.files)"/>  
  <div id="filecontent"></div>  
  </body>  
</html>

readAsText一般只能讀取txt,html等等文件，局限性較大，比如想要前端讀excel文件，由于解決文件編碼問題較為復雜，需要用到js-xlsx插件，具體可百度方法。

常用API：

FileReader.readAsDataURL(File) //轉換成base64格式

FileReader.readAsText() //轉換成字符串格式

FileReader.readAsArrayBuffer(File) //轉換成ArrayBuffer格式

FileReader.readAsBinaryString(File) //轉換成原始二進制格式（貌似已被廢除）

FileReader.onload = function (e) { console.log(e.target.result) } //在上述讀取事件完成時觸發(fā)

二.文件拖拽的方法保存文件

關于文件拖拽下面有注釋，我主要說一下怎么給用js給input賦值，而不是手動去選文件

因為拖拽的區(qū)域只是一個div，無法進行上傳操作，所以需要加一個form和input，讓拖拽進去的文件進入input中。

取出files后，用$("#file1")[0].files=files;將文件賦值給input，注意賦值的必須是fileList對象，不要試圖只放進去一個文件，fileList只讀。

然后用h5中的FormData將form轉化，提交即可

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .container{
            width:300px;height: 300px;
            border:2px dashed #ddd;
            text-align: center;
            padding:50px;
        }
    </style>
    <title>
        培訓活動列表
    </title>
</head>
<body>
<div class="container">
    拖拽進入
</div>
<form id="form1" method="post" enctype="multipart/form-data">
    <input type="file" name="file1" id="file1" value="" />
</form>
<script type="text/javascript">
    $('.container').bind('dragenter dragover', ignoreDrag);
    $(".container").on({drop:function(e){
        var flag=true;
        e.preventDefault();
        //jquery的file要去e.originalEvent里面拿，拖拽獲取files的方式與input的不同
        var files = e.originalEvent.dataTransfer.files;
        //var files = e.dataTransfer.files;  原生的話這樣就可以獲取
        for(var i=0;i<files.length;i++){
            myFileReader(files[i],function(result,file){
                if(result){
                    //文件
                    console.log(file.name)
                }else{
                    //文件夾
                    console.log("不要上傳文件夾")
                    flag=false;
                }
            });
        }
        if(flag){
            $("#file1")[0].files=files;   //關鍵：將取到的文件賦值給input，用于ajax提交文件?。?！
            var formData = new FormData($("#form1")[0]);     
            $.ajax({
                url : "/it/orderManage/saveActivity",
                type : 'POST',
                data : formData,
                // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)
                processData : false,
                // 告訴jQuery不要去設置Content-Type請求頭
                contentType : false,
                async : true,
                success : function(ret) {
                    //alert("上傳成功")
                    if(ret){
                        $("#trainInfoModal").modal("hide");
                        layer.alert("保存成功")
                        $('#orderTable').bootstrapTable("refresh");
                        $("#trainInfoModal input").val("");
                        $("#trainInfoModal textarea").val("");
                    }
                }
            });
        }
        console.log(files);
    }})
    function ignoreDrag(e) {e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
    }
    function myFileReader(file, callback){
        if(!window.FileReader){
            callback(true,file);
            return false;
        }
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload=function(e){
            callback(true,file);
        }
        fr.onerror=function(e){  //不好判斷是否是文件夾，通過上傳報錯可以判斷是文件夾
            callback(false,file);
        }
        return true;
    };
</script>
</body>
</html>

后臺獲取文件還是用MutipartFile[]接收

public String saveActivity(@RequestParam HashMap<String, String> param,
                               //@RequestParam(value = "banner") MultipartFile[] files,
                               @RequestParam(value = "file1") MultipartFile[] file1,
                               HttpServletRequest request,
                               String fileNames,
                               String TID, HttpServletRequest req) {

三.vue+axios 上傳文件

無論ajax還是axios，都不是直接用表單提交的，都是 要用 new FormData()轉化一下。

所以axios方法與ajax方法類似

<input type="file" class="inputBtn"  @change="uploadMarketingForm">
uploadMarketingForm(e){
	console.log(e)
	var fileName=e.target.files[0].name; //文件名
	var fileSize=e.target.files[0].size; //文件大小
	var param = new FormData();
        //添加表單參數(shù)，如果后臺用文件數(shù)組接收
        //param.append("file", e.target.files);
        //如果后臺只接收單一文件
	param.append("file", e.target.files[0]);
        //設置表頭類型
	const config = {
		headers: { "Content-Type": "multipart/form-data" }
	};
	this.axios.post("/.../uploadTest", param, config).then(res => {
		console.log(res);
	});
},

在java spring mvc中還是這么接收

@ResponseBody
@RequestMapping(value = "uploadTest", produces = "text/plain;charset=UTF-8")
public String uploadTest(@RequestParam Map<String,String> param,@RequestParam(value = "file") MultipartFile[] file1,
                         HttpServletRequest request) throws IOException {
    RetBase retBase = new RetBase();
    //文件可以在參數(shù)中用MultipartFile[]（多文件） 或者 MultipartFile （單一文件）接收
    //也可以像這樣在request中接收
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    MultipartFile multifile = multipartRequest.getFile("file"); // 通過參數(shù)名獲取指定文件
    String fileName = multifile.getOriginalFilename();
    // 獲取文件后綴
    String prefix=fileName.substring(fileName.lastIndexOf("."));
    // 用uuid作為文件名，防止生成的臨時文件重復
    final File file = File.createTempFile(UUID.randomUUID().toString(), prefix);
    // MultipartFile to File
    return JSON.toJSONString(retBase, SerializerFeature.WriteMapNullValue);
}

到此這篇關于關于input type="file"的及其files對象的深層探究的文章就介紹到這了,更多相關input type="file"內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論