javascript - JQuery Ajax 文件 Ypload 导致完整页面重新加载

Question

通过 Ajax 上传文件时出现问题，调用完成后页面重新加载，这是代码

function Save() {
    var files1 = $("#file1").get(0).files;
    var data = new FormData();
    data.append("Data", JSON.stringify(GetData()));
    for (i = 0; i < files1.length; i++) {
        data.append("file" + i, files1[i]);
    }
    var resp =
       {
           service: "File/SaveFile",
           sender: data,
           progress: null,
           funct: null,
           antes: null,
           despues: null
       };
    var response = CallServiceUpload(resp);
    response.done(function (responseData, textStatus) {
        var controlInput = $("#file1");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    });
    return response;
}

function GetData() {
    x =
    {
        ID: 1
    }
    return x;
}

this.CallServiceUpload = function (obj) { 
    return $.ajax({
        type: "POST",
        url: "api/" + obj.service,
        data: obj.sender,
        contentType: false,
        processData: false,
        error: function (message) {           
            alert(message.responseText);
        }        
    });
}

这是使用 ASP.NET Web Api 的服务器代码

using DataManager.Estruct.DTO;
using DataManager.Logic;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;

namespace WebApp.Controllers
{
    public class FileController : ApiController
    {
        #region 

        [HttpPost]
        [ActionName("SaveFile")]
        public async Task<JObject> SaveFile()
        {
            // Check if the request contains multipart/form-data.
            var httpContent = Request.Content;
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }
            string root = HttpContext.Current.Server.MapPath("~/App_Data");
            try
            {
                StringBuilder sb = new StringBuilder(); // Holds the response body
                var provider = new CustomMultipartFormDataStreamProvider(root);
                // Read the form data and return an async task.
                await Request.Content.ReadAsMultipartAsync(provider);

                string jsonData = provider.FormData.GetValues("Data")[0];                
                List<string> deletefiles = new List<string>();

                foreach (var file in provider.FileData)
                {
                    FileInfo fileInfo = new FileInfo(file.LocalFileName);
                    //Process File
                }
                provider.FileData.Clear();
                foreach (string deletefile in deletefiles)
                {
                    try
                    {
                        File.Delete(deletefile);
                    }
                    catch (Exception ex)
                    {
                        string error = ex.InnerException.Message;
                    }
                }

                object x = new { data = "ok"};
                return JObject.FromObject(x);

            }           
            catch (Exception ex)
            {
                // string Mensaje = LCuenta.LogError(null, ex, System.Reflection.MethodBase.GetCurrentMethod().Name);
                var error = new { error = ex.Message };
                return JObject.FromObject(error);
            }
        }



        #endregion
    }

    public class CustomMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
    {
        public CustomMultipartFormDataStreamProvider(string path) : base(path) { }

        public override string GetLocalFileName(HttpContentHeaders headers)
        {
            return headers.ContentDisposition.FileName.Replace("\"", string.Empty);
        }
    }


}

我已经将此代码用于另一个应用程序，但在这种情况下，在执行 javascript 方法 Save 后，整个页面会重新加载，如果文件很小 o 调用没有文件只有数据 y 不会重新加载，则页面 html 在 asp 上使用 mvc 的 web 视图，但只是一个容器，所有代码都在 javascript 上。

谢谢！;

标签： javascriptjqueryasp.net-web-api

Answer 1

在按钮单击时使用 preventDefault Ex

$("#buttonID").click(function(event){
    event.preventDefault();
});