jQuery网站常用资质表单验证

查看演示立即下载

插件描述：通过 up.js来实现图片上传功能，并判断名称，手机号是否输入正确

更新时间：2022-03-08 08:53:30

通过 up.js来实现图片上传功能，并判断名称，手机号是否输入正确核心代码：

$(".file").change(function() {
    var idFile = $(this).attr("id");
    var file = document.getElementById(idFile);
    var imgContainer = $(this).parents(".aui-photo"); //存放图片的父元素        
    var fileList = file.files; //获取的图片文件        
    console.log(fileList + "======filelist=====");
    var input = $(this).parent(); //文本框的父亲元素       
    var imgArr = []; //遍历得到的图片        
    var numUp = imgContainer.find(".aui-up-section").length;
    var totalNum = numUp + fileList.length; //图片总的数量可自定义       
    if (fileList.length > 3 || totalNum > 3) {
        alert("你好！上传图片不得超过3张，请重新选择"); //一次选择上传超过3个  自己定义        
    } else if (numUp < 3) {
        fileList = validateUp(fileList);
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(fileList[i]);
            imgArr.push(imgUrl);
            var $section = $("<section class='aui-up-section fl loading'>");
            imgContainer.prepend($section);
            var $span = $("<span class='aui-up-span'>");
            $span.appendTo($section);
            var $img0 = $("<img class='aui-close-up-img'>").on("click", function(event) {
                event.preventDefault();
                event.stopPropagation();
                $(".aui-works-mask").show();
                delParent = $(this).parent();
            });
            $img0.attr("src", "img/close.png").appendTo($section);
            var $img = $("<img class='aui-to-up-img aui-up-clarity'>");
            $img.attr("src", imgArr[i]);
            $img.appendTo($section);
            var $p = $("<p class='img-aui-img-name-p'>");
            $p.html(fileList[i].name).appendTo($section);
            var $input = $("<input id='actionId' name='actionId' value='' type='hidden'>");
            $input.appendTo($section);
            var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
            $input2.appendTo($section);
        }
    }
    setTimeout(function() {
        $(".aui-up-section").removeClass("loading");
        $(".aui-to-up-img").removeClass("aui-up-clarity");
    }, 4100);
    numUp = imgContainer.find(".aui-up-section").length;
    if (numUp >= 3) {
        $(this).parent().hide();
    }
    $(this).val("");
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery移动端三级地区联动
下一个特效： jQuery响应式无限滚动瀑布流