如何通过 Ajax 使用文件上传来保存图像答案

【问题标题】：How to save image using fileuploader through Ajax如何通过 Ajax 使用文件上传来保存图像
【发布时间】：2015-09-22 01:14:04
【问题描述】：

我有一个员工正在添加 Aspform。它包含有关员工及其形象的所有详细信息。现在所有数据都使用 Ajax 和 Web 方法保存。但是图片上传不起作用。所有其他信息都通过数组传递到 Web 方法。

我有一个文件上传按钮和一个图像预览缩略图。但是我不知道如何保存图片，需要哪些列，如何获取图片路径，如何将上传的图片传输到我们项目的文件夹以及如何将图片重命名为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);
                }
            });

【问题讨论】：

标签： jquery asp.net ajax image file-upload

【解决方案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');
                        }
                    });
                });
            });

【讨论】：