Question

我正在尝试使用Dropzone.js上传文件。我的代码使用ajax来调用我的Controller但是在保存文件后它会进行回发。如何在回帖后做到这一点？

我的代码：

HTML

<form action="/Promotion/UploadImages" class="dropzone" id="dzCampaingImages" method="post" enctype="multipart/form-data">
    @*<form class="dropzone" id="dzCampaingImages" method="post" enctype="multipart/form-data">*@
        <div class="fallback">
            <input id="inputCampaingImages" name="file" type="file" multiple />
        </div>
    </form>

JAVASCRIPT

Dropzone.options.dzCampaingImages = {

            //prevents Dropzone from uploading dropped files immediately
            autoProcessQueue: false,
            uploadMultiple: true,
            init: function () {
                var submitButton = document.querySelector("#btnUploadSubmit");
                var myDropzone = this; //closure

                submitButton.addEventListener("click", function (files) {

                    //tell Dropzone to process all queued files
                    //myDropzone.processQueue();

                    //return false;
                    //var data = new FormData();
                    //for (var i = 0; i < files.length; i++) {
                    //    data.append(files[i].name, files[i]);
                    //};

                    var data = new FormData();
                    for (var i = 0; i < myDropzone.files.length; i++) {
                        data.append(myDropzone.files[i].name, myDropzone.files[i]);
                    };

                    $.ajax({
                        url: '@Url.Content("~/Promotion/UploadImages")',
                        type: "POST",
                        processData: false,
                        contentType: false,
                        data: data,
                        success: function (response) {
                            //code after success
                            return false;
                        },
                        error: function (er) {
                            alert(er);
                        }

                    });
                });

C＃

public void UploadImages()
    {
        bool isUpload = true;

        HttpContext context = System.Web.HttpContext.Current;

        try
        {
            //foreach (string fileName in Request.Files)
            //{
            //    HttpPostedFileBase file = Request.Files[fileName];

            //    //You can Save the file content here
            //    //
            //    string servPath = ConfigurationManager.AppSettings["PathTemp_CampaingImages"];
            //    string servFilePath = Request.RequestContext.HttpContext.Server.MapPath(servPath + file.FileName);

            //    // 
            //    //using (FileStream outStream = new FileStream(servFilePath, FileMode.CreateNew, FileAccess.Write))
            //    //{
            //    //    // 
            //    //    //file.InputStream.CopyTo(outStream);

            //    //}

            //    // 
            //    file.SaveAs(servFilePath);
            //}

            string servPath = context.Server.MapPath(ConfigurationManager.AppSettings["PathTemp_CampaingImages"]);
            //string servFilePath = Request.RequestContext.HttpContext.Server.MapPath(servPath + file.FileName);

            string filePath = servPath;

            //write your handler implementation here.
            if (context.Request.Files.Count <= 0)
            {
                context.Response.Write("No file uploaded");
            }
            else
            {
                for (int i = 0; i < context.Request.Files.Count; ++i)
                {
                    HttpPostedFile file = context.Request.Files[i];
                    if (context.Request.Form != null)
                    {
                        string imageid = context.Request.Form.ToString();
                        imageid = imageid.Substring(imageid.IndexOf('=') + 1);

                        if (file != null)
                        {
                            string ext = file.FileName.Substring(file.FileName.IndexOf('.'));
                            if (ext.ToLower().Contains("gif") || ext.ToLower().Contains("jpg") || ext.ToLower().Contains("jpeg") || ext.ToLower().Contains("png"))
                            {

                                byte[] data;
                                using (Stream inputStream = file.InputStream)
                                {
                                    MemoryStream memoryStream = inputStream as MemoryStream;
                                    if (memoryStream == null)
                                    {
                                        memoryStream = new MemoryStream();
                                        inputStream.CopyTo(memoryStream);
                                    }
                                    data = memoryStream.ToArray();
                                    //System.IO.File.WriteAllBytes(filePath + file.FileName + ".jpg", (byte[])data);
                                    //club.club_image = Convert.ToBase64String(data);
                                }
                            }
                        }
                    }
                    else
                    {

                    }

                    //file.SaveAs(context.Server.MapPath(filePath + file.FileName));
                    //context.Response.Write("File uploaded");
                }
            }
        }

我正在尝试使用Dropzone.js上传文件。我的代码使用ajax来调用我的Controller但是在保存文件后它会进行回发。如何在回帖后做到这一点？

感谢您的帮助。

Answer 1

这是因为默认情况下＆＃34;提交＆＃34;按钮还使用传统的整页提交提交表单，无论在点击时是否运行任何JavaScript。

你可以

1）将您的提交按钮改为<button type="button"（默认情况下不会回发）

或

2）使用＆＃34; preventDefault＆＃34;在JavaScript中针对传递给侦听器的回调函数的事件对象起作用：

submitButton.addEventListener("click", function (event) {
  event.preventDefault();
  //...etc

这将停止发生单击元素（在本例中为表单提交）的默认行为。

有关此功能的更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault。

Answer 2

问题在于Visual Studio因为浏览器链接功能而向我的代码中注入了一个javascript。我注意到这是因为浏览器开发人员控制台中出现了错误。

这是帮助我的链接，

XML Parsing Error

另一个有用的链接， Using Browser Link VS

保存文件时MVC Dropzone.js回发

2 个答案: