在HTML表单中利用JavaScript实现图片上传的前端校验

本文基于HTML页面表单，使用Java初始化默认图片后，利用JavaScript来实现HTML表单中图片上传的前端校验。文件上传的相关配置及示例可参考利用Servlet3.0 API实现文件上传。

HTML中的Form表单

<form id="imageForm" class="form-horizontal" action="" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2">我的图片</label>
        <div class="col-sm-10">
            <input type="file" name="image" id="imageFile" accept=".gif,.jpg,.jpeg,.png"/>
            <img src="$imageUrl$" class="img-rounded"/>
            <span class="text-warning" id="imageFileWarning"></span>
            <p class="help-block">上传的图片大小不能超过200KB；可使用默认图片</p>
        </div>
    </div>
    <input type="hidden" name="_csrf" value="$csrf.token$"/>
</form>
<form class="form-horizontal" action="/myapp/plus_$myappId$" method="post">
    <input id="imageUuid" name="imageUuid" type="hidden" value="$imageUuid$"/>
    <!--此处省略form其他属性-->
</form>

利用Java初始化默认图片

//GET方法加载Form对象Image属性
final Map<String, Object> attributes = formDto.attributes();
attributes.put("imageUrl", "/public/image/" + formDto.getImageId() + "?w=60");

//利用STRender对象将数据插入到现有HTML中
STRender stRender = new STRender("template/plus_myapp.html", attributes);
final String responseText = stRender.render();
response.setContentType("text/html");
response.getWriter().write(responseText);

利用JS实现图片上传后的前端校验

<script>
    jQuery(function () {
        jQuery("#imageFile").change(function () {
            var mine = jQuery(this);
            var fileName = mine.val();
            if (fileName == "") return;
            if (!isImage(fileName)) {
                jQuery("#imageFileWarning").text("请选择图片类型");
                mine.val("");
                return;
            }
            if (!isAvailableImageSize(this, fileName, 200)) {
                jQuery("#imageFileWarning").text("请选择合适的图片大小");
                mine.val("");
                return;
            }
            jQuery("#imageForm").ajaxSubmit({
                url: "/myapp/upload_image",
                dataType: "json",
                type: "post",
                success: function (data) {
                    //console.log("Msg: " + data.message);
                    jQuery("#imageFileWarning").text(" ");
                    mine.val("");
                    if (data.message == null) {
                        mine.next().attr("src", contextPath + "/public/image/" + data.uuid + "?w=60");
                        jQuery("#imageUuid").val(data.uuid);
                    } else {
                        alert(data.message);
                    }
                }
            });
        });
    });
    function isImage(fileName) {
        return /.(gif|jpg|jpeg|png|GIF|JPG|png)/.test(fileName);
    }

    function isAvailableImageSize(inputEle, fileName, size) {
        var img = new Image();
        img.src = fileName;
        var limitSize = size * 1024;
        if (img.fileSize) {
            return img.fileSize <= limitSize;
        } else {
            return inputEle.files[0].size <= limitSize;
        }
    }
</script>