原生JS图片异步上传

最新推荐文章于 2021-08-06 11:46:50 发布

chihualuan0951

最新推荐文章于 2021-08-06 11:46:50 发布

阅读量83

点赞数

文章标签： php

原文链接：https://my.oschina.net/u/3268486/blog/1486735

版权

<div class="cont">
    <ul class="clearfix">
        <form  enctype="multipart/form-data">
            <li>
                <label>选择图片：</label>
                <input class="file" type="file" id="mBgImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                <span>640*320</span>
            </li>
        </form>
    </ul>
    <div class="btn_input">
        <input type="button" class="btn cancel" value="取消">
        <input type="button" class="btn confirm" id="mBgBtn" value="确定">
    </div>
</div>

1、将需要上传的图片用<from>处理，代码如上

2、js代码，如下

$("#mBgBtn").click(function () {

    //判断是否有选择上传文件
    var mBgImg = $("#mBgImg").val();
    if (mBgImg == "") { alert("请选择上传图片！"); return; } 
    //判断上传文件的后缀名  
    var strExtension = mBgImg.substr(mBgImg.lastIndexOf('.') + 1); 
    if ( strExtension != 'gif' && strExtension != 'jpeg' && strExtension != 'jpg' && strExtension != 'png' && strExtension != 'svg' ) {alert("请选择合法图片上传！"); return; } 
    //原生JS上传开始  
    var xhr; 
    function createXMLHttpRequest(){ 
        if(window.ActiveXObject){ 
            xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
        }else if(window.XMLHttpRequest){ 
            xhr = new XMLHttpRequest(); 
        } 
    } 

    var fileObj = document.getElementById("mBgImg").files[0]; 
    var FileController = 'index.php?m=admin_area_mBgImgChg'; 
    var form = new FormData(); form.append("mBgImg", fileObj); 
    createXMLHttpRequest(); 
    xhr.onreadystatechange = handleStateChange; 
    xhr.open("post", FileController, true); 
    xhr.send(form); 

    function handleStateChange(){ 
        if(xhr.readyState == 4){ 
            if (xhr.status == 200 || xhr.status == 0){ 
                var result = xhr.responseText; 
                var ref = result.split('|'); 
                if(ref[0] == -2){ 
                    alert(ref[1]); 
                    $("#mBgBtn").parents(".popup").hide(); 
                    return; 
                }else { 
                    alert(ref[1]); 
                    return; 
                } 
            } 
        } 
    } //原生JS上传结束
});