jq+ajax 原生图片上传示例

最新推荐文章于 2023-07-14 10:43:35 发布

耳东君呐

最新推荐文章于 2023-07-14 10:43:35 发布

阅读量105

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/chenchang0419/article/details/118224118

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>图片上传示例</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        .imageWrapper {
            display: flex;
            flex-direction: column;
        }

        .imageWrapper .fontTip {
            color: #ccc;
            line-height: 24px;
        }

        .imageWrapper .btnUpload {
            height: 33px;
            min-width: 24px;
            padding: 0 20px;
            border: 1px solid #0064b6;
            border-radius: 3px;
            background: #0071ce;
            color: #fff;
            font-size: 14px;
            line-height: 33px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        .imageShow {
            margin-top: 16px;
            width: 200px;
            height: 200px;
            border: 1px solid rgba(151, 151, 151, 1);
        }

        .imageShow>img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="imageWrapper">
        <div class="imageShow">
            <input id="imagePic" name="imagePic" type="file"
                accept=".bmp,.jpg,.png,.jpeg,image/bmp,image/jpg,image/png,image/jpeg" style="display:none;" />
            <img id="uploadImageShow" src="" />
        </div>
    </div>
    <div class="imageWrapper">
        <div class="imageShow">
            <input id="imagePic1" name="imagePic" type="file"
                accept=".bmp,.jpg,.png,.jpeg,image/bmp,image/jpg,image/png,image/jpeg" style="display:none;" />
            <img id="uploadImageShow1" src="" />
        </div>
    </div>
</body>
<script src="../js/mui.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript">
    function uploadImage(uploadImageShow, imagePic) {
        $(uploadImageShow).click(function () {
            $(imagePic).click();
        })
        $(imagePic).on("change", function (e) {
            var file = e.target.files[0]; //获取图片资源
            var fileTypes = ["bmp", "jpg", "png", "jpeg"];
            var bTypeMatch = false
            for (var i = 0; i < fileTypes.length; i++) {
                var start = file.name.lastIndexOf(".");
                var fileType = file.name.substring(start + 1);
                if (fileType.toLowerCase() == fileTypes[i]) {
                    bTypeMatch = true;
                    break;
                }
            }
            if (bTypeMatch) {
                if (file.size <= 1024 * 1024 * 10) {
                    var farmData = new FormData();
                    farmData.append("file", $(imagePic)[0].files[0])
                    mui.ajax(requestUrl + "/net-sign-company/api/upload-image", {
                        data: farmData,
                        processData: false, // 告诉jQuery不要去处理发送的数据
                        contentType: false,
                        dataType: 'json', //服务器返回json格式数据
                        type: 'post', //HTTP请求类型
                        headers: {
                            'zbtoken': localStorage.getItem("token")
                        },
                        success: function (data) {
                            console.log(data.data)
                            var params = data.data
                            $(uploadImageShow).attr("src", params);
                        },
                        error: function (xhr, type, errorThrown) {
                            //异常处理；
                            console.log(type);
                        }
                    });

                } else {
                    alert('仅支持不超过10M的图片');
                    emptyImageUpload(imagePic)
                    $(uploadImageShow).attr("src", "")
                    return false;
                }
            } else {
                alert('仅限bmp，jpg，png，jpeg图片格式');
                emptyImageUpload(imagePic)
                $(uploadImageShow).attr("src", "")
                return false;
            }
        });
    }
    uploadImage("#uploadImageShow", "#imagePic")
    uploadImage("#uploadImageShow1", "#imagePic1")
    //清空上传图片信息
    function emptyImageUpload(selector) {
        var fi;
        var sourceParent;
        if (selector) {
            fi = $(selector);
            sourceParent = fi.parent();
        } else {
            return;
        }
        $("<form id='tempImgForm'></form>").appendTo(document.body);

        var tempImgForm = $("#tempImgForm");
        tempImgForm.append(fi);
        tempImgForm.get(0).reset();
        sourceParent.append(fi);
        tempImgForm.remove();
    }
</script>

</html>

原生封装jq+ajax上传图片，亲测好用

耳东君呐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq+ajax 原生图片上传示例

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>图片上传示例</title> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type=.
复制链接

扫一扫