Input file 上传文件

介绍

<input> type 类型为 file 的 input 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作

属性

accept属性

该属性表明了服务器端可接受的文件类型，可以限制你手机选择相关的文件，如果限制多个，可以用逗号分割。

accept 属性接受一个逗号分隔的 MIME 类型字符串, 如:

accept="image/png" 或 accept=".png" — 只接受 png 图片.
accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" — PNG/JPEG 文件.
accept="image/*" — 接受任何图片文件类型.
accept="audio/*" — 接受任何音频文件类型.
accept="video/*" — 接受任何音频文件类型.
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受任何 MS Doc 文件类型.

<input accept="image/*,audio/*"

multiple属性

multiple属性代表是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

<input id="fileId2" type="file" multiple="multiple" name="file" />

使用 form 表单

如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：enctype="multipart/form-data"

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：application/x-www-form-urlencoded。对于普通数据是挺适用的，但是，对于文件，图片这些，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。明表单需要上传二进制数据。

<form enctype="multipart/form-data">
  <input type="file" name="myfile">
  <input type="submit">
</form>

事件监听

在 input 元素上监听 change 事件就能获取到用户上传的文件信息，包括文件名、上传时间、文件大小等等，通过 FileReader 我们还可以将图片文件转换成 base64 编码格式实现预览图片功能。

在 change 事件监听的函数内，event.target.files 就是用户上传的图片信息。

样式修改

原生的input file 实在是不好看，外加不好修改 CSS。所以用来其他的方式。

第一种：把 input file 样式设置display:none; 隐藏, 或者设置透明度 opacity设置为0，外层用div包裹，就实现了美化功能。然后用一个好看的按钮代替点击，之后，在js里调用调用这个input的点击事件。

  <button type="button" class="btn btn-primary">点击</button>
  <input type="file"  id="" style='display:none;'>
  <script> 
    let btn = document.querySelector('.btn');
    let ipFile = document.getElementsByTagName('input')[0];
   
    btn.addEventListener("click", function (e) {
      inFile.click();
    }, false);
  </script>

第二种方法：，使用 label元素与 input file控件关联,然后隐藏 input。也是一样的。只不过不用调用方法了。

<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="display:none;"></form>

实现拖拽图片进行预览

也就是使用 drag 事件来进行拖拽。如果是上传其他的文件，可以进行类型判断。

其实预览得到的 src 是 base64 。上传的也是base 。所以一般都是把图片当文件上传，用 FormData对象存储传输。

 <div class="unload" draggable="true">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#iconLocalUpload"></use>
        </svg>
        <div class="load-text">将文件拖到此处，或
            <span >点击上传</span>
        </div>
        <input type="file"  id="">
    </div>
    <div>
        <p  class='view-img'>预览</p>
  </div>
   <script>
    let ipFile = document.getElementsByTagName('input')[0];
    let unload = document.querySelector('.unload');
    let lt = document.querySelector('.load-text');

    let p = document.querySelector('.view-im');

    unload.addEventListener("dragenter", function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);

    unload.addEventListener("dragover", function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);

    unload.addEventListener("dragleave", function (e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);

    // 托拽实现
    unload.addEventListener("drop", function (e) {
        var df = e.dataTransfer;
        for(let i = 0; i < df.files.length; i++) {
            var item = df.items[i];
            var file = item.getAsFile();
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function(){
                // 获取得到的结果
                var data = this.result;
                dom.insertAdjacentHTML('beforeend',`<img src=${data} width='100%'>`);
            }
        }
        e.preventDefault();
        e.stopPropagation();
    },false)

    lt.addEventListener('click',function(e){
        ipFile.click();
    },false)
    
    // file 事件
    ipFile.addEventListener('change',function(e){
        for(let i = 0; i < this.files.length; i++) {
            let file = this.files[i];
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function(){
                // 获取得到的结果
                var data = this.result;
                p.insertAdjacentHTML('beforeend',`<img src=${data} width='100%'>`);
            }
        }
    },false)

    function toodFile(df,dom){
    }
  </script>

HTML input type=file文件选择表单元素二三事
 前端本地文件操作与上传

Input file 上传文件