jquery / Ajax" undefined"错误

时间:2017-06-21 09:36:19

标签: asp.net-mvc

我正在尝试在我的MVC项目中运行一个图像上传器,但每次我点击上传文件按钮,我得到"错误未定义",我不知道我哪里出错。

该页面是部分视图,加载在@ Html.BeginForm中。下面是我正在使用的代码。

Index.cshtml

@using (Html.BeginForm("Register", "Account", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div class="container">
        <div class="row">
            <article class="col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
                <div id="wid-id-0">

                    <!-- widget div-->
                    <div role="content">
                        <!-- widget content -->
                        <div class="widget-body">

                            <div class="row" style="background: white">
                                <form id="wizard-1" novalidate="novalidate">
                                    <div id="bootstrap-wizard-1" class="col-sm-12">

                                        <div class="tab-content">

                                            @*Tab 1 (Step 1)*@
                                            <div class="tab-pane active" id="tab1">
                                                <br>

                                                @Html.Partial("Registration/_Step1")

                                                <div class="form-actions">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <ul class="pager wizard no-margin">
                                                                <li class="previous disabled">
                                                                    <a href="#" class="btn btn-lg btn-default"> Previous </a>
                                                                </li>
                                                                <li data-target="#step2" class="next">
                                                                    <a href="#tab2" data-toggle="tab" class="btn btn-lg txt-color-darken"> Next </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        <div class="form-bootstrapWizard">
                                            <ul class="bootstrapWizard form-wizard" style="background: coral">
                                                <li class="active" data-target="#step1">
                                                    <a href="#tab1" data-toggle="tab" class="active"> <span class="step">1</span> <span class="title">Step 1: Profile Information</span> </a>
                                                </li>
                                                <li data-target="#step2" class="">
                                                    <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Step 2: Profile Picture</span> </a>
                                                </li>
                                                <li data-target="#step3" class="">
                                                    <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Step 3: Identification</span> </a>
                                                </li>
                                                <li data-target="#step4">
                                                    <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Step 4: Submit Profile</span> </a>
                                                </li>
                                            </ul>
                                            <div class="clearfix"></div>
                                        </div>

                                    </div>
                                </form>
                            </div>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

            </article>
        </div>
    </div>
}

_Step1.cshtml

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(document).ready(function () {
            $("#Upload").click(function (e) {
                e.preventDefault();

                var formData = new FormData();
                var totalFiles = document.getElementById("FileUpload").files.length;
                for (var i = 0; i < totalFiles; i++)
                {
                    var file = document.getElementById("FileUpload").files[i];

                    formData.append("FileUpload", file);
                }
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("UploadFiles", "Account")',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        alert('succes!!');
                    },
                    error: function (error) {
                        alert("error: " + error.statusMessage);
                    }
                });
            });
        });

    </script>


    <table align="center">
        <tr>
            <td style="text-align: center;"><label>Upload Profile Picture</label></td>
            <td></td>
        </tr>
        <tr>
            <td valign="top"><img id="imgPreview" src="~/Content/Images/upload_holder.PNG" class="img-holder" style="width: 180px; height: 180px;" /></td>
            <td>
                @*<input type="submit" class="btn btn-lg" style="width: 200px; background: #0091d9; color: white;" value="Upload Photo" />*@
                @*<input id="input-4" name="input4[]" type="file" multiple class="file-loading" style="width: 200px; background: #0091d9; color: white;" value="Upload Photo">*@
                <input type="file" id="FileUpload" multiple />
                <input type="submit" id="Upload" value="Upload"/>
                <br />
                <br />
                <label>Acceptable file formats: jpg, gif or png file</label>
                <br />
                <label>Under 1 MB</label>

            </td>
        </tr>
    </table>

非常感谢任何帮助!

编辑:下面是控制器功能,但从未命中。

  [HttpPost]
    public ActionResult UploadFiles()
    {
        // Checking no of files injected in Request object  
        if (Request.Files.Count > 0)
        {
            try
            {
                //  Get all files from Request object  
                HttpFileCollectionBase files = Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    //string path = AppDomain.CurrentDomain.BaseDirectory + "Uploads/";  
                    //string filename = Path.GetFileName(Request.Files[i].FileName);  

                    HttpPostedFileBase file = files[i];
                    string fname;

                    // Checking for Internet Explorer  
                    if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                    {
                        string[] testfiles = file.FileName.Split(new char[] { '\\' });
                        fname = testfiles[testfiles.Length - 1];
                    }
                    else
                    {
                        fname = file.FileName;
                    }

                    // Get the complete folder path and store the file inside it.  
                    fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);
                    file.SaveAs(fname);
                }
                // Returns message that successfully uploaded  
                return Json("File Uploaded Successfully!");
            }
            catch (Exception ex)
            {
                return Json("Error occurred. Error details: " + ex.Message);
            }
        }
        else
        {
            return Json("No files selected.");
        }
    }

0 个答案:

没有答案