原生JS-JQuery-使用input實現文件上傳-type="file"

通常原生的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()
}