Блог

Я пытаюсь загрузить и просмотреть изображение с помощью jQuery Ajax. Но она перезагружает страницу всякий раз, когда я выбираю только файл изображения. Одна вещь, которую я заметил здесь, заключается в том, что она не перезагружает страницу, если я выбираю файлы, отличные от файла изображения. Я проверил решение онлайн и добавил все возможные решения, предложенные для этого, т. е. contentType: false и event.preventDefault(); , но оно по-прежнему работает не так, как ожидалось

HTML-код выглядит следующим образом

 <form id="createCategory">
    <label>Name</label>
    <input name="Name" />
    <br />
    <label>Description</label>
    <input name="Description" />
    <br />
    <label>Image</label>
    <input id="inpImageURL" name="ImageURL" type="hidden" />
    <input id="inpImageUpload" name="Image" type="file"/>
    <div class="thumb">
        <img id="imgUploadImage" src="#" alt="your image" />
    </div>
    <br />
    <button type="submit">Save</button>
</form>
  

Код jQuery выглядит следующим образом

 $("#inpImageUpload").change(function (event) {
        debugger;
        event.preventDefault();

        var element = this;

        var formData = new FormData();
        var totalFiles = element.files.length;
        for (var i = 0; i < totalFiles; i  ) {
            var file = element.files[i];
            formData.append("Photo", file);
        }

         $.ajax({
             type: 'POST',
             url: '/Shared/UploadImage',
             dataType: 'json',
             data: formData,
             processData: false,
             contentType: false

         })
        .done(function (response) {
            debugger;
            alert('ajax was called success');
            //console.log(response);
            //if (response.Success) {
            //    //$("#imgUploadImage").attr("src", response.inpImageURL);
            //    //$("#inpImageURL").val(response.inpImageURL);
            //    alert('ajax was called success');
            //}
        })
        .fail(function (XMLHttpRequest, txtStatus, errorThrown) {
            alert("Failure AJAX Call");
        });



    });
  

ASP.Net Ниже приведен код MVC

 public class SharedController : Controller
    {
        public JsonResult UploadImage()
        {
            JsonResult result = new JsonResult();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            try
            {
                var file = Request.Files[0];
                var fileName = Guid.NewGuid()   Path.GetExtension(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Content/images"), fileName);
                file.SaveAs(path);
                result.Data = new { Success = true, ImageURL = string.Format("/Content/images/{0}", fileName) };
            }
            catch (Exception ex)
            {

                result.Data = new { Success = false, Message = ex.Message };
            }

            return resu<
        }
    }