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

来源：互联网发布：电脑桌面软件怎么收纳编辑：程序博客网时间：2024/06/05 22:52

图片的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" onchange="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" onload="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>

0 0