ajax异步提交表单，包含图片

最新推荐文章于 2024-04-20 03:39:57 发布

rookieStruggling

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量2.6k

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/luckyjiexu/article/details/71606669

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

图片的type='file'在表单数据中不能直接获取，可以将他们的data放在一个集合中，然后再上传

<form id="formFile" name="formFile" method="post" enctype="multipart/form-data">
    <table style="border: 0px;margin: 20px;">
        <tr>
            <td>
                <span class="allstyle">公司LOGO</span>
            </td>
            <td>
                <input type="file" class="pecture" id="upload_img" οnchange="onUploadImgChange(this)" >
            </td>
        </tr>
        <tr>
            <td>
                <span class="allstyle">LOGO预览</span>
            </td>
            <td style="width: 100px;height: 100px;display: block;">
                <div id="preview_wrapper">
                    <div id="preview_fake">
                        <img id="companyLOGO" οnlοad="onPreviewLoad(this)"/>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <span class="allstyle">公司版权号</span>
            <td>
                <input type="text" name="comcopyright" class="companyCopyright" value=""/>
            </td>
        </tr>
    </table>
    <input type="submit" class="allUpload" value="上传" style="margin-left: 100px;">
</form>

js上传

 $(function(){
        var dateArray =[];
        $('form input[type=submit]').click(function(){
            //判断是否有选择上传文件
            var imgPath = $("#upload_img").val();
            if (imgPath == "") {
                alert("请选择上传图片！");
                return;
            }
            //判断上传文件的后缀名
            var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
            if (strExtension != 'jpg' && strExtension != 'gif'&& strExtension != 'png' && strExtension != 'bmp') {
                alert("请选择图片文件");
                return;
            }
            $("input[type='text']").each(function () {
                var dateSet = {};
                dateSet.img = $("#upload_img").val();
                dateSet.name = $(".companyName").val();
                dateSet.phone = $(".companyPhone").val();
                dateSet.qq = $(".companyQQ").val();
                dateSet.address = $(".companyAddress").val();
                dateSet.copyright = $(".companyCopyright").val();
                dateArray.push(dateSet);
            });
            var JsonData = JSON.stringify(dateArray);
            console.log(JsonData)
            $.ajax({
                type:"POST",
                url:'user.php',
                async:true,
                dataType: 'json',
                data:JsonData,
                success:function(response){
                    $("#companyLOGO").empty();
                    $("#companyLOGO").html(response);
                    $("#companyLOGO").show();
                    $("#responseText").text(response);
                    console.log($("#responseText").text(response));
                }
            });
        });
    });

</script>