JQuery+ajax进行简单的文件上传,以及类型、大小限制

第一步、获取上传的图片 

<td>
  <input type="file"/>
  <input type="button" onclick="postData(this);" value="上传" 
         style="width:50px;height:30px;"/>
  <div>
    <img class='proImg' alt="无图片" src='${p.img}' style='width:120px;height:120px;'/>
    <input name="imgAward" type='hidden' value="${p.img}"/>
  </div>
</td>
//--------------------上传图片--------------start
function postData(e)
    {
        //获取上传图片文件
        let uploadPhoto = $(e).prev()[0].files[0];
        //prev() 方法返回被选元素的前一个同级元素
        if(uploadPhoto == null)
        {
            Feng.error('请选择图片');
            return
        }

        //文件类型判断
        var b = checkFileExt(uploadPhoto.name);
        if(!b)
        {
            Feng.error('图片不合法');
            return
        }

        //文件大小判断
        var bSize = checkFileSize(uploadPhoto,'5MB');
        if(!bSize)
        {
            Feng.error('图片大小不能超过5M');
            return
        }

        var formData = new FormData();
        formData.append("file", uploadPhoto);
        $.ajax({
            url: Feng.ctxPath+"/common/uploadImg", /*接口域名地址*/
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.code == "success") {
                    Feng.success('上传成功');
                    $(e).next().children().attr("src",res.url);
                    $(e).next().children().next().attr("value",res.url)
                } else {
                    Feng.error('失败');
                }
            }
        })
    }
//--------------------上传图片--------------end

第二步、进行限制操作

/* 限制文件类型,返回 boolean
* */
function checkFileExt(filename)
{
    var flag = false; //状态
    var arr = ["gif","jpeg","jpg","png","bmp"];
    //取出上传文件的扩展名
    var index = filename.lastIndexOf(".");
    var ext = filename.substr(index+1);
    //循环比较
    for(var i=0;i<arr.length;i++)
    {
        if(ext == arr[i])
        {
            flag = true; //一旦找到合适的,立即退出循环
            break;
        }
    }
    return flag;
}

/* 限制文件大小,返回 boolean
         * file:文件对象
         * limiteSize:限制大小---例如:"50MB"
         * */
function checkFileSize(file, limitSize) {
    var arr = ["KB", "MB", "GB"]
    var limit = limitSize.toUpperCase();
    var limitNum = 0;
    for (var i = 0; i < arr.length; i++) {
        var leval = limit.indexOf(arr[i]);
        if (leval > -1) {
            limitNum = parseInt(limit.substr(0, leval)) * Math.pow(1024, (i + 1))
            break
        }
    }
    console.info("上传文件的大小:"+file.size);
    console.info("文件限制的大小:"+limitNum);
    if (file.size > limitNum) {
        return false
    }
    return true
}

猜你喜欢

转载自blog.csdn.net/bbj12345678/article/details/114360275
今日推荐