form表单异步提交上传图片

最新推荐文章于 2022-08-24 18:07:45 发布

cihongmo6452

最新推荐文章于 2022-08-24 18:07:45 发布

阅读量154

点赞数

文章标签： java json javascript ViewUI

原文链接：https://my.oschina.net/sniperLi/blog/662684

版权

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<body>
<h2>Hello World!</h2>

<form id="myForm" method="post" enctype="multipart/form-data">
    <table>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" name="name">
            </td>
        </tr>
        <tr>
            <td>文件</td>
            <td>
                <img width="100" height="100" id="allImgUrl"/>
                <input type="file" name="uploadfile" onchange="uploadPic()" />
            </td>
        </tr>
    </table>
</form>

<script src="${pageContext.request.contextPath}/resources/js/jquery/jquery-2.1.1.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/jquery/jquery.form.js"></script>

<script type="text/javascript">
//上传图片
function uploadPic(){
    //定义参数
    var options = {
        url : "${pageContext.request.contextPath}/uploadfile.do",
        dataType : "json",
        type :  "post",
        beforeSubmit : function(formData,jqForm,options){
            //判断是否为图片
            var f = jqForm[0];//将jqForm转成DOM对象
            var v = f.uploadfile.value;//获取DOM对象中name为logoPic的值
            //获取扩展名,并转成小写
            var ext = v.substring(v.length-3).toLowerCase();
            //比对扩展名 jpg gif bmp png 
            if(ext != "jpg" && ext != "gif" && ext != "bmp" && ext != "png"){
                alert("只允许上传图片!");
                return false;
            }
            //校验提交的表单
            return true;
        },
        success : function(data){
            //将全路径设置给img标签,显示图片用
            $("#allImgUrl").attr("src", "${pageContext.request.contextPath}/" + data.allImgUrl);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        }
    };
    
    //jquery.form使用方式
    $("#myForm").ajaxSubmit(options);
}
</script>

</body>
</html>

转载于:https://my.oschina.net/sniperLi/blog/662684

cihongmo6452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单异步提交上传图片

<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%><html><body><h2>HelloWorld!</h...
复制链接

扫一扫