Question

尝试将文件保存到数据库。我通过javascript使用formData来附加文件并通过ajax将其添加为post对象。由于某种原因没有发送任何东西

我做错了什么？

HTML

<input type="file" style="display: none;" class="btn btn-primary uploadFile">

脚本：

        $(".saveImage")
            .on("click",
                function() {
                  var files = $(".uploadFile");
                  var data = new FormData();


                  data = $.OverWatch.worker.uploadFileHandler.addUploadFiles(files, data);


                    $.OverWatch.worker.postUserData("/Administration/AddUserImage", data, function () {
                        alert("done");
                    });

                });

上述功能如下：

        addUploadFiles: function (files, data) {
            $.each(files, function (i, v) {
                var file = $(this).data("files");
                data.append("file", file);
            });

            return data;
        }

postUserData：

    postUserData: function(url, data, callback) {

        $.LoadingOverlay("show");
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            dataType: "HTML",
            success: function(data) {

                if (callback) {
                    callback(data);
                    $.LoadingOverlay("hide");
                }

            },
            error: function(event, jqxhr, settings, thrownError) {
                //$.helpers.errorHandler($("#fileDialogErrors"), event.responseText);
                var h;
                $.LoadingOverlay("hide");
            }
        });
    },

后端：

    public ActionResult AddUserImage()
    {
        if (Request.Files.Count != 0)
        {
           //save
        }

        return null;
    }

编辑：

 var files = $(".uploadFile");

返回：

Answer 1

您的var file = $(this).data("files");代码行将返回undefined（除非您有一些其他javascript添加data值，但您无法将文件添加到data以便将其添加到$.each(files, function (i, v) { for (i = 0; i < v.files.length; i++) { var file = v.files[i]; data.append("file", file); } });任何情况下它都不会返回文件。）

将循环更改为

var data = new FormData($('form').get(0));

但是，您可以使用FormData来简化此操作，public ActionResult AddUserImage(IEnumerable<HttpPostedFileBase> files)将序列化所有表单控件，包括DefaultModelBinder的文件输入（有关详细信息，请参阅how to append whole set of model to formdata and obtain it in MVC）。

我还建议您将方法签名更改为

^((?!(\d)\1{7}).)*$

让<?php $testFail = "I like 111111111, but I can't use it"; echo preg_match('/^((?!(\d)\1{7}).)*$/', $testFail); ?>发挥其魔力。

Answer 2

使用 Request.Files

调用时，您可以直接从控制器获取文件

//(Request) HttpRequestBase object for the current HTTP request
if (Request.Files.Count > 0)//// Is image is uplaod by browse button
{
   var inputStream = Request.Files[0].InputStream;
   using (var binaryReader = new BinaryReader(inputStream))
   {
       var ImageBytes = binaryReader .ReadBytes(Request.Files[0].ContentLength); // same as you can get multiple file also
   }
   var fileExtension = Path.GetExtension(Request.Files[0].FileName);
}

感谢。

Answer 3

我还没有用jQuery做过，但是我昨天自己学会了如何使用普通的旧javascript ...以下对我有用。如果你想坚持使用jquery，也许你可以将功能翻译成你需要的东西：

var formElement = document.querySelector("form");
var payload = new FormData(formElement);

function onStateChange(ev) {
     // Check if the request is finished
     if (ev.target.readyState == 4) {
         editor.busy(false);
         if (ev.target.status == '200') {
             // Save was successful, notify the user with a flash

         } else {
             // Save failed, notify the user with a flash

         }
     }
};

xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', onStateChange);
xhr.open('POST', '/posts');
xhr.send(payload);

也许看看使用上面的代码是否适合你（它只是针对你在同一页面上的一个表单），然后你可以解决它是你的脚本是问题还是后端/通信问题。

如何使用ajax发布文件？

3 个答案: