第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

form+iframes模擬文件上傳

1 DOM结构

<form method="post" action="/CloudMarketing/limitPM/uploadFile" target="uploadFrame" id="upload" enctype="multipart/form-data">
     <input name="file" accept="xls,xlsx,jpg,jpeg,pdf" value="" id="fileLocalFile" type="file">
     <!-- 隐藏我们的上传文件控件 -->
     <button type="button" class="yi-btn bor-primary" id="uploadBtn">上传</button>
</form>
<!-- 隐藏的iframe -->
<iframe id="uploadFrame" name="uploadFrame" width="0" height="0" border="0" style="opacity:0"></iframe>

2 JS部分

//上传文件
//监听frame的 onload方法
let oFrm = document.getElementById("uploadFrame");
oFrm.onload = oFrm.onreadystatechange = function () {
    if (this.readyState && this.readyState != "complete") return;
    //获取iframe里面的内容
    let responseText = document.getElementById("uploadFrame").contentWindow.document.getElementsByTagName("BODY")[0].innerText;
    //上传完成后的处理
    if (responseText != "") {
        let responseData = JSON.parse(responseText);
        // alert(JSON.parse(responseText));
        $('.update-file .selected-option').show();
        $('.update-file .selected-option ul').html('<li><span class="name" data-id="' + responseData.RetValue.filePath + '">' + responseData.RetValue.fileName + '</span><span class="close-wrap"><i class="icon icon-close"></i></span></li>');
    }
}

//监听文件路径变化
$("#fileLocalFile").change(function () {
    let filePath = $("#fileLocalFile").val();
    if (filePath != "") {
        let extionType = filePath.substr(filePath.lastIndexOf(".") + 1);
        if (extionType != "xls" && extionType != 'xlsx' && extionType != 'jpg' && extionType != 'jpeg' && extionType != 'pdf') {
            alert("请上传jpg、pdf、excle等格式,大小1.5M以内的文件");
            $("input[name=fileLocalFile]").val("");
            return;
        } else {
            if ($('.update-file .selected-option ul').html() == '') {
                let index = filePath.lastIndexOf("\\"),
                    fileName = filePath.substring(index + 1, filePath.length);
                $('#upload')[0].submit();
                $("input[name=fileLocalFile]").val("");
            } else {
                //确认弹层
                $('.yi-mask').show();
                $('#confirmD').show();
            }

        }
    }
});

$('#confirmD .btnok').click(function () {
    $('#confirmD').hide();
    $('.yi-mask').hide();
    let filePath = $("#fileLocalFile").val();
    let index = filePath.lastIndexOf("\\"),
        fileName = filePath.substring(index + 1, filePath.length);
    $('#upload')[0].submit();
    $("input[name=fileLocalFile]").val("");
});
//弹层关闭
$('#confirmD .close,#confirmD .btnok').click(function () {
    $('.yi-mask').hide();
    $(this).parents('.yi-modal').hide();
    $("input[name=fileLocalFile]").val("");
})

3 CSS部分

#upload {
    position: relative;
    float: left;
}

#fileLocalFile {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 30px;
    z-index: 1;
    cursor: pointer;
}

总结:

a>
不要用其他事件来绑定file的点击事件,会造成ie8拒绝访问;
如:

 $("#uploadBtn").click(function() {
  	$("#fileLocalFile").trigger("click");
 });

b>
接口要返回字符串类型的数据,ie8接收不到json类型

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消