input實現上傳

很多時候我們會用到上傳，實現一個普通的上傳也很簡單，不用引用繁瑣的插件

一個普通的上傳

    <form action="=upload" method="post" enctype="multipart/form-data">
        <input id="file1" name="fileupload" type="file" value="" />
        <input id="" type="submit" value="上傳" />
    </form>

From上的屬性

action是要上傳的地址，要向什么地方發送表單數據，可以是絕對地址，也可以是相對地址。

method是要發送的方式，可以是post，也可以是get。

enctype規定了在發送之前對要發送的數據如何編碼，multipart/form-data表示不需要對字符編碼，如果是上傳，必須用這個屬性。

Input上的屬性

accept此處沒有定義，可以過濾文件上傳的類型，如accept="image/gif, image/jpeg"，多個用逗號隔開。

multiple如果加入了這個屬性，表示可以支持多選，如multiple="multiple"。

---------------------------------------------------以上實現簡單的上傳就夠了---------------------------------------------------------------------

上傳后input會有一些屬性，可以給我們提供一些便利。

 

    <form action="=upload" method="post" enctype="multipart/form-data">
        <input id="files1" name="fileupload" type="file" value="" onchange="fileChange()" />
        <input id="" type="submit" value="上傳" />
    </form>
    var files1 = document.getElementById('files1');
    function fileChange(){
        console.log(files1.files)
    }

 

這里給input添加了一個事件，改變后獲取input上的files屬性。上傳了一個文件后打印結果如下

可以看到，其中files里有一個對象，包含了上傳文件的名字、大小以及格式，我們就可以根據這些屬性來做一些事情。

如想要獲取圖片上傳的名字，可用files1.files[0].name，大小可以用files[1].files[0].size等。

如果想讓上傳的圖片顯示出來，這里提供兩種方法：

方法一：直接把名字給一個img的src（圖片需要放在同文件夾內）。

<img src="" alt="" id="uploadImg">
<script>
    var files1 = document.getElementById('files1');
    var uploadImg = document.getElementById('uploadImg');
    function fileChange(){
        uploadImg.src = files1.files[0].name;
    }
</script>

方法二：創建一個FileReader對象

<img src="" alt="" id="uploadImg">
<script>
    var files1 = document.getElementById('files1');
    var uploadImg = document.getElementById('uploadImg');
    function fileChange(){
        var reader = new FileReader();
        reader.readAsDataURL(files1.files[0]);
        reader.onload = function () {
          uploadImg.src = this.result;
        }
    }
</script>

如果要實現多文件上傳，同理用循環咯，既然有files[0]，就有files[1]，files[2].....，至於用哪種方法實現都可以。

方法一的例子：

<form action="Upload" method="post" enctype="application/x-www-form-urlencoded" >
    <input onchange="cinput()" id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
</form>
<div id="imgList"></div>
<script>var File1 = document.getElementById('File1');
    var imgList = document.getElementById('imgList');
    function cinput() {
        var imgHtml = '';
        for(var i=0; i< File1.files.length; i++){
            var imgHtmlTem = `<img id="img_preview" data-src="" src=${File1.files[i].name} data-holder-rendered="true" style="width: 100px; height:100px;display: block;">`;
            imgHtml+=imgHtmlTem;
        }
        imgList.innerHTML = imgHtml;
    }
</script>

end.