1

更新を行わずに ajax、jquery、formdata を含むファイルをアップロードしようとしています。残念ながら、コントローラーでファイルを読み取ろうとすると、ファイルが空であると表示され、その理由がわかりません。

div「uploadForm」はフォームそのものです。

JQuery:

  $("#submitImage").click(function (event) {
    event.preventDefault();
    $('#uploadImage #submitImage').val('Uploading File..');

    var formData = new FormData($('#uploadForm'));

    $.ajax({
        url: "Upload",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });


});

HTML:

 @using (Html.BeginForm("Index", "Upload", FormMethod.Post, new { enctype = "multipart/form-data", @id="uploadForm"}))
        {
    <input type="submit" value="Upload Image" id="submitImage"/>
    <input type="file" name="file" id="bannerImage" value="Choose file" />
    }

コントローラ：

  [AcceptVerbs(HttpVerbs.Post)]
   [HttpPost]
    public ActionResult Index(HttpPostedFileBase file)
    {
        Functions Functions = new Functions();
        string Filename = Functions.GenerateUniqueFileName();

        if (file == null)
        {
            ViewBag.Test = "Ajax call complete, but the file is empty";
        }
        else
        {
            ViewBag.Test = "Ajax call complete, and the file isn't empty!";
        }
        return View();
    }

}

ライブ デモ: http://upload.jamieknoef.nl/ (ファイルの選択とファイルのアップロード ボタンのみを使用する必要があります)

編集：修正済み、答えについては私の他の投稿を参照してください！

前もって感謝します！

4

2 に答える 2

2

投稿したコードの 2 番目のチャンクで動作する理由を知りたい場合は、次のようにします。

あなたが持っていた最初のチャンクで

var formData = new FormData($('#uploadForm'));

jQuery でラップされたオブジェクトを FormData コンストラクターに渡す場所。コンストラクターが HTMLFormElement を想定しているため、これは機能しません ( https://developer.mozilla.org/en-US/docs/Web/API/FormData?redirectlocale=en-US&redirectslug=Web%2FAPI%2FXMLHttpRequest%2FFormDataを参照)。

2 番目のチャンクには次のものがあります。

var form = $(this);    
formdata = new FormData(form[0]);

form[0] はフォームを表す実際の DOM 要素であるため、これは期待どおりに機能します。

于 2013-07-20T15:10:27.047 に答える
0

何が問題なのかわかりませんが、機能する次のコードを見つけました。

$('#myform').on('sumbit', function(){
var form = $(this);
var formdata = false;
if (window.FormData){
    formdata = new FormData(form[0]);
}

var formAction = form.attr('action');
$.ajax({
    url         : '/upload',
    data        : formdata ? formdata : form.serialize(),
    cache       : false,
    contentType : false,
    processData : false,
    type        : 'POST',
    success     : function(data, textStatus, jqXHR){
        // Callback code
    }
});

});

ソース: https://coderwall.com/p/p-n7eq

于 2013-07-20T15:03:09.270 に答える