Question

我有员工添加Aspform。它包含员工与其形象的所有细节。现在使用Ajax和Webmethod保存所有数据。但图片上传无效。所有其他信息都通过一个数组 Webmethod。

我有一个fileuploader按钮和一个图像预览缩略图。但我不知道如何保存图像，这需要什么列，如何获取图像路径，如何将上传的图像传输到我们的项目文件夹以及如何设置将图像重命名为employeeId。

我的代码吼叫

 <div class="col-sm-2">
                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <div id="mypic" class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 84px; height: 84px;">
                                                <img id="img1" src="img/DummyImg.png" alt="">
                                            </div>
                                            <div>
                                                <span class="profile_pic_btn_wrap">
                                                    <input type="file" onchange="readQuestURL(this);" name="profile_pic_file" class="profile_pic_file" />
                                                    <span class="profile_pic_btn">Select Image</span>
                                                </span>
                                            </div>
                                        </div>                                 
                                    </div>




            $.ajax({

                type: "POST",
                dataType: "json",
                contentType: "application/json",
                url: "staffinfo.aspx/SaveStaffInfo",
                data: JSON.stringify({ edit: edit, arr: arr, superioremployee: superioremployee }),
                success: function (msg) {
                    if (msg.d != "") {
                        var x = msg.d;
                        x = x.split(",");
                        document.getElementById('hdnStaffId').value = x[1];
                        alert(x[0]);
                        EmployeeCount();
                    }

                },
                error: function (msg) {
                    alert(msg.d);
                }
            });

Answer 1

在ID为form_file
的表单中插入div

   $(function () {
                $('#form_file').on('submit', function (e) {
                    e.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
    //                    cache: false,
                        type: "POST",
                        //  dataType: "json",
                        processData: false,
                        contentType: false,
                        url: "staffinfo.aspx/SaveStaffInfo",
                        data: formData,
                        success: function (response) {
                            if (msg.d != "") {
                            var x = msg.d;
                            x = x.split(",");
                            document.getElementById('hdnStaffId').value = x[1];
                            alert(x[0]);
                            EmployeeCount();
                        }
                        },
                        error: function () {
                            alert('SYSTEM ERROR, TRY LATER AGAIN');
                        }
                    });
                });
            });

如何使用fileuploader通过Ajax保存图像

1 个答案: