搜尋

首頁  >  文章  >  web前端  >  一個小時帶你總結前端上傳文件的方法（整理分享）

一個小時帶你總結前端上傳文件的方法（整理分享）

WBOY
WBOY轉載
2022-02-08 17:33:3115809瀏覽

這篇文章為大家帶來了關於前端上傳文件的相關知識，其中包括傳統開發模式上傳、前後端分離上傳以及ajax上傳等等相關問題，希望對大家有幫助。

一個小時帶你總結前端上傳文件的方法（整理分享）

上傳檔案

專案中會有很多檔案上傳的需求，例如：頭像上傳、表格檔案、word文件等…

#上傳必備表單元素：

<input>

進行檔案上傳的時候，
1.表單必須是post請求
2.表單必須宣告不要對資料進行編碼- enctype=multipart/form- data

傳送資料的格式就是鍵值對的形式，且資料都是js的資料類型，但檔案進行傳輸的時候，只有兩種形式去傳輸：

  1. 以字串的形式去描述一個檔案
  2. 以檔案流的形式去描述一個檔案

#傳統開發模式上傳

##前後端混在一起開發

傳統開發模式的上傳需要將表單中選擇的檔案傳送給後端，讓後端做上傳：




    <input>
    <input>

此時的表單中必須有enctype這個屬性，這個屬性的說明如下圖：


一個小時帶你總結前端上傳文件的方法（整理分享）
點擊上傳按鈕後，後端對檔案進行上傳處理，以php為例：


echo "上传文件名: " . $_FILES["avatar"]["name"] . "<br>";  上传文件的名称
echo "文件类型: " . $_FILES["avatar"]["type"] . "<br>";  上传文件的类型
echo "文件大小: " . ($_FILES["avatar"]["size"] / 1024) . " kB<br>";  上传文件的大小，以字节计
echo "文件临时存储的位置: " . $_FILES["avatar"]["tmp_name"];  存储在服务器的文件的临时副本的名称
echo $_FILES["file"]["error"]  由文件上传导致的错误代码
將文件儲存到伺服器中：


move_uploaded_file($_FILES["avatar"]["tmp_name"], "upload/" . $_FILES["avatar"]["name"]);
echo "文件存储在: " . "upload/" . $_FILES["avatar"]["name"];
在實際開發中，為了提高效率，通常都會使用前後端分離開發。 
前後端分離上傳
前端做前端，後端做後端，最後使用介面文件對接- 核心技術是ajax
前後端分離開發，應用的主要技術就是ajax。上傳同樣可以使用ajax來上傳。 
FormData是js內建的一個建構函數，建構出來的物件可以辨識檔案資訊。 
使用方式：
建構FormData對象，將檔案資訊加入FormData對像中，然後上傳。 
檔案資訊在檔案選擇控制項：表單.files
範例：


    <input>
    <input><script>document.querySelector(&#39;[type="button"]&#39;).onclick = function(){
	 console.log(document.querySelector(&#39;[type="file"]&#39;).files)}</script>


一個小時帶你總結前端上傳文件的方法（整理分享）
FormData物件有一個特點，將檔案訊息新增進去後，直接列印不能看到檔案訊息，需要使用for of遍歷才能看到：


var formdata = new FormData();var fileinfo = document.querySelector('[type="file"]').files[0];formdata.append('avatar',fileinfo) / 将文件信息添加到FormData对象中
console.log(formdata)for(var v of formdata){
    console.log(v)}


一個小時帶你總結前端上傳文件的方法（整理分享）
#FormData物件中也可以新增別的數據，進行一起提交：


formdata.append('avatar',fileinfo)formdata.append('age',12)for(var v of formdata){
    console.log(v)}


一個小時帶你總結前端上傳文件的方法（整理分享）
從FormData物件中刪除一個數據，使用：


formdata.delete(键)
有時候，我們在一個表單中需要上傳多個文件，此時，FormData中可以不用追加一個檔案訊息，可以在建構FormData物件的時候，將整個表單物件傳入，他會自動辨識所有資料：





    <input>
    <input>
    <input>


<script>document.querySelector(&#39;[type="button"]&#39;).onclick = function(){
    var formdata = new FormData(document.querySelector(&#39;form&#39;));
    for(var v of formdata){
        console.log(v)
    }}</script>
一個小時帶你總結前端上傳文件的方法（整理分享）
當使用FormData上傳的時候，將FormData物件當作資料傳入，不需要修改請求頭，瀏覽器會自動修改。 
此時已經實現了前後端分離上傳了，但是正常專案中都會有一個預覽圖片的功能。 
我們可以讓後端在實作上傳後，將上傳以後的檔案名稱傳送給前端，讓前端渲染回傳的圖片路徑。 
但這樣是在上傳以後預覽的，假設我們選擇了文件以後，就想看看這個文件是否要上傳，也就是在上傳之前要預覽的話，還是沒有辦法實現。 
我們可以利用H5提供的FileReader來讀取檔案並預覽，然後決定是否要上傳。 
ajax上傳


ajax進行上傳後


 var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status>=200 && xhr.status將檔案資料放在send中進行傳送<p> 需要藉助H5提供的建構函數FormData - 用來識別檔案資訊<br></p><pre class="brush:php;toolbar:false">var fd = new FormData()
將檔案資訊放在fd這個物件中- 用fd的append方法
檔案資訊在哪裡？ 
var file = document.querySelector('[type="file"]')
    // console.dir(file);
    var fileinfo = file.files[0] / 文件信息
append方法，是將檔案放入這個物件中，物件就需要鍵值對，參數1是鍵，參數2是檔案資訊
fd.append('avatar',fileinfo)
fd有一個特性，就是直接列印他， 看不到其中的內容需要遍歷才能看到其中的數據- 必須使用for of
for(var value of fd){
         console.log(value);
    }
fd除了能添加文件信息，還可以添加數據
fd.append('username',document.querySelector('[name="username"]').value)
上传文件的时候，利用FormData，里面就有了数据和文件信息，其实最终文件和数据以二进制数据流进行传送的，不需要设置请求头，因为ajax会自动调整
文件数据其实就是fd
php：
现在能打印出数据，文件存到了临时目录中
 上传就是将临时文件移动到服务器中
header("content-type:text/html;charset=utf8");echo "<pre class="brush:php;toolbar:false">";print_r($_FILES);move_uploaded_file($_FILES['avatar']['tmp_name'],'./upload/'.$_FILES['avatar']['name']);// echo '上传成功';echo './upload/'.$_FILES['avatar']['name'];
 echo "<script>
     alert(&#39;上传成功&#39;)
     location.assign(&#39;./1-上传表单.html&#39;)</script>
ajax 上传前：
当文件选择器中的数据发生了变化就要读取并预览
 读取并预览 - 借助H5提供的FileReader - 读取文件是异步读取
 构造函数需要new
document.querySelector('[type="file"]').onchange = function(){var fr = new FileReader();
readAsArrayBuffer - 将数据读取成一个Buffer数组
var fileinfo = this.files[0]
参数要一个文件对象 - 结果是一个buffer
fr.readAsArrayBuffer(fileinfo)
参数要一个文件对象 - 结果是一个二进制数据 - 适用于多媒体文件
fr.readAsBinaryString(fileinfo)
结果是一个可以当做路径使用的数据 - base64字符串 - 适用于图片
fr.readAsDataURL(fileinfo)
在load事件中，读取完成后获取读取出来的数据
 load事件在读取完成的时候触发
fr.onload = function(){
        / result属性是读取出来的内容        / console.log(fr.result);
        / 创建img标签        var img = document.createElement('img')
        img.src = fr.result;
        document.body.appendChild(img)
FileReader读取文件
FileReader也是js内置的一个构造函数，主要功能是用来读取文件，读取文件为异步读取。
var fr = new FileReader()  创建读取对象// 该对象的读取方法：fr.readAsDataUrl(文件信息)  将文件读取为base64字符串 - 通常用于图片文件,读取结果可以作为图片的src使用
fr.readAsArrayBuffer(文件信息)  将文件读取为二进制数据流 - 通常用于多媒体文件
fr.readAsText(文件信息)  将文件读取为字符串 - 通常用于文档文件
对象监听的事件：
abort事件：在读取被中断的时候触发
 error事件：读取发生错误的时候触发
 load事件：在读取完成的时候触发 - 常用语读取完成后获取数据
 loadstart事件：在读取开始的时候触发
 loadend事件：在读取结束的时候触发
 progress事件：在读取过程中触发
例：
fr.onload = function(){
  读取结果为：对象.result 或 事件对象.target.result
    console.log(fr.result)  此时这个数据就可以作为img的src进行图片预览}
base64是指：小写字母+大写字母+数字+加号+等于号 共64个字符
jquery上传
data位置就直接写formData就好了
设置一个content-type为false表示jquery不要设置请求头
设置一个processData为false，表示query不要修改数据格式



    <input>
    <input>
    

    <input>



我们可以在new的时候，将表单元素放在构造函数中 - 默认能将表单中的数据，添加到这个对象中


$('[type="button"]').click(function()
    var fd = new FormData($('form')[0])

    $.ajax({
        url:"2-upload.php",
        method:"post",
         jquery上传用 FormData
        data:fd,
        contentType:false,  不让jQuery的ajax修改请求头
        processData:false,  不让jquery的ajax编码数据        success:res=>{
            console.log(res);
        }
        
    })})


webWorker


大量运算的代码，可以作为一个异步线程执行
 需要将这段代码单独放在一个文件中
 需要new一个worker对象 - 这个构造函数需要在服务器环境中运行


woker需要一个事件，当文件完成以后获取里面的数据
 可以在事件中，接收到文件中导出的数据


woker.onmessage = function(e){
    数据就在事件对象的data属性中
    console.log(e.data);}


当业务逻辑需要的计算量比较大的时候，同步代码会阻塞下面的代码继续执行，此时需要将这个大计算量的代码另外开辟一个新的线程进行执行，这个线程也是异步执行的，但需要将在新线程中执行的代码单独放在一个js文件中，使用方式：


var w = new Worker(需要异步执行的js文件)


如果在主线程中需要这个线程中返回的数据，在这个线程中使用postMessage来返回：


postMessage(数据)


主线程中接收返回出来的数据：


w.onmessage = function(e){
    e.data // 是异步线程中返回出来的数据}


离线缓存


离线缓存的作用：在马上断网之后，依旧可以访问到缓存下来的文件。比较鸡肋。该技术在2020年8月已经被弃用了。


使用方式：


使用规则        1. 需要你自定义一个 .manifest 文件        2. 再你书写 html 文件的时候
          => 如果这个 html 文件需要缓存规则
          => 再 html 标签上添加一个 manifest 属性
          => 值就写你的缓存规则文件        3. 第一次打开页面的时候
          => 就会按照你书写的缓存规则去缓存文件


例：


第一行必须要写上
 CACHE MANIFEST
 以注释的形式书写一个版本号
 app version 1.0


表示你要缓存的文件
 CACHE:
 ./index.html
 ./css/index.css


表示必须需要网络环境才可以请求的文件
 一般我们会书写 星号(*), 表示除了 CACHE 里面书写的文件, 其他的去过没有网络环境就报错
 NETWORK:
 *


当你再一个离线环境下访问一些没有的页面的时候
 使用一个什么内容替代
 FALLBACK:


  • ./404.html




事件循环面试题：


<script>console.log(1)setTimeout(()=>{ console.log(2) },0) new Promise(resolve=>{
    console.log(3)
    resolve()}).then(()=>{ 
    console.log(4)})setTimeout(()=>{ 
    console.log(5)
    new Promise(resolve=>{
        console.log(6)
        setTimeout(()=>{ 
            console.log(7)
        })
        resolve()
    }).then(()=>{ 
        console.log(8)
    })},500)new Promise(resolve=>{
    console.log(9)
    resolve()}).then(()=>{ 
    console.log(10)
    setTimeout(()=>{ 
        console.log(11)
    },0)})console.log(12)</script>


 答案：1 3 9 12 4 10 2 11 5 6 8 7


更多编程相关知识，请访问：编程视频！！
以上是一個小時帶你總結前端上傳文件的方法（整理分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
php jquery css ajax html 数据类型 for 构造函数 Error 字符串 循环 接口 线程 主线程 append JS 对象 事件 异步 选择器 word
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除
上一篇：javascript中function的用法是什麼下一篇：javascript中function的用法是什麼
相關文章
看更多