最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定

form+iframes模擬文件上傳

標(biāo)簽:
Html/CSS JQuery JavaScript

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类型

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評論

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

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

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報(bào)

0/150
提交
取消