ajax異步提交表單,包含圖片

圖片的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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章