原生js使用input实现文件上传

Posted 2021-03-05 涼皮Herr

通常原生的input上传是先进行文件的选择，然后通过提交按钮对文件进行上传，现功能需求是选择文件后直接进行上传，通过后端返回的文件信息进行展示，在提交操作时不再进行文件的上传，只传递文件相关信息如id或者url。

文件上传-带进度条：https:////www.cnblogs.com/liangpi/p/12531429.html

效果展示：

1、html中 使用自己的按钮遮挡原生input的样式，可根据自己需求进行调整

<div class="fileBtn" >
   <input type="file" id="uploadfile">
   <button type="button" class="btn btn-primary btn-sm btn-flie">上传附件</button>
</div>
<div class="info-item" id="fileList">
   <!-- <div class="files-info">
    　　  <p>文件1.pdf</p>
    　　  <p class="filedown checkIcon"><img src="images/check.png" alt=""></p>
    　　  <p class="filedown downIcon"><img src="images/down.png" alt=""></p>
    　　  <p class="filedown deleteIcon"><img src="images/del.png" alt=""></p>
      </div> -->
</div>

2、css样式

.fileBtn {
    position:relative;
}
.fileBtn #uploadfile {
    width: 120px;
    height: 30px;
    filter: Alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
.fileBtn .btn-flie {
    width: 120px;
    height: 30px;
    /* cursor: pointer */
     position: absolute; 
     z-index: 1;
}
.info-item {
    margin-top: 35px;
}

3、js相关代码

var fileList = [] // 文件list
$(\'#uploadfile\').change(function(){
    var fileItem = $(\'#uploadfile\')[0].files[0]
    var formData = new FormData();
        formData.append(\'file\', fileItem)
        formData.append(\'type\', \'1\')
    $.ajax ({
        type : "post",
        url : contextPath + "/user/upload",
        data : formData,
        async : true,
        cache : false,
        contentType : false,
        processData : false,
        dataType : \'json\',
        success : function (data) {
            if (data.code == 2000){
                var dataInfo = data.data
                if(dataInfo) { 
                    fileList.push(dataInfo)
                    showFile()
                }
            } else{
                alert(data.message);
            }
        }
    });
});
function showFile() {
    var fileItem = fileList
    if(fileItem.length){
        var str = \'\'
        for(var i = 0; i < fileItem.length; i++){
            str += \'<div class="files-info"><p>\';
            str +=  fileItem[i].name
            str += \'</p>\'
            /*str += \'<p class="fileIcon checkIcon"><img src="images/check.png" alt=""></p>\'
            str += \'<p class="fileIcon down"><img src="images/down.png" alt=""></p>\'*/
            str += \'<p class="fileIcon delete"><img src="images/del.png" alt="" onclick=delFileItem(\'
            str += `\\\'`;
            str += i;
            str += `\\\'`;    
            str += \')></p>\';
            str += \'</div>\';
        }
        $(\'#fileList\').html(str)
    } else {
        $(\'#fileList\').remove()
    }
}
function delFileItem(i){
    fileList.splice(i, 1)
    showFile()
}