檔案上傳概述

weixin_33912246發表於2018-06-07

檔案上傳概述

 

檔案上傳總計分為三種方式：

1.通過flash,activeX等第三方外掛實現檔案上傳功能。

2.通過html的form標籤實現檔案上傳功能，優點：瀏覽器相容好。

3.通過xhr level2的非同步請求，可以百度formData物件。

 

 

其中第三個我還沒接觸過,所以就百度了一下

參考地址: https://segmentfault.com/a/1190000012327982

 

new FormData() - FormData物件的作用及用法

一、概述

FormData 物件的使用：
1.用一些鍵值對來模擬一系列表單控制元件：即把form中所有表單元素的name與value組裝成
一個queryString
2. 非同步上傳二進位制檔案。

二、使用

1.FormData物件的操作方法，全部在原型中，自己本身沒任何的屬性及方法。

let formData = new FormData()
formData.append('user', 'zhang')
獲取 formData.get('user')  //zhang
刪除 formData.delete('user')
.....

2.使用FormData物件傳送檔案

HTML部分
<form action="">
        <label for="">
            姓名: <input type="text" name="name">
        </label>
        <label for="">
            檔案：<input id="file" type="file" name="file">
        </label>
        <label for="">
            <input type="button" value="儲存">
        </label>
</form>
JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
    // 檔案元素
    var file = document.querySelector('[type=file]');
    // 通過FormData將檔案轉成二進位制資料
    var formData = new FormData();
    // 將檔案轉二進位制
    *****注意2******
    formData.append('upload', file.files[0]);
    *****注意1******
    var xhr = new XMLHttpRequest;
    xhr.open('post', 'file.php');
    // 監聽上傳進度
    xhr.upload.onprogress = function (ev) {
    // 事件物件
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        console.log(percent);

        progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                    //
            }
    }
}

注意1：使用jQuery

 $.ajax({
    url: 'file.php',
    type: 'POST',
    data: formdata,                    // 上傳formdata封裝的資料
    dataType: 'JSON',
    cache: false,                      // 不快取
    processData: false,                // jQuery不要去處理髮送的資料
    contentType: false,                // jQuery不要去設定Content-Type請求頭
    success:function (data) {           //成功回撥
        console.log(data);
    }
});

注意2：引數
new FormData的引數是一個DOM物件，而非jQuery物件

var formData = new FormData($("#file")[0]);

三、jQuery的引數序列化方法serialize()

序列表表格內容為字串，用於 Ajax 請求。 
$("form").serialize()

 

 

擴充套件:一個input=file 多檔案上傳

input type="file"多圖片上傳

單個的input type="file"表單也是可以實現多圖片上傳的

程式碼如下:

    <form action="manypic.php" method="post" enctype="multipart/form-data">
        <input type="file" name="manypic[]" multiple>
        <input type="submit">
    </form>

這裡要給file表單加上一個multiple屬性 multiple="multiple"也可以

name的屬性值後面要加上[]這樣就可以了  print_r($_FILES)可得到如下資訊:

 

 

 

擴充套件: https://www.cnblogs.com/fps2tao/p/9146229.html

 

相關文章