web-dev-qa-db-ja.com

Ajaxポストを介してフォームデータと共にファイルを送信する

フォーム内のいくつかのフィールドと一緒にajax経由でファイルをアップロードしようとしています。ただし、機能しません。このエラーが発生します。

未定義のインデックス：-ファイル

これが私のコードです。

[〜＃〜] html [〜＃〜]

    <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>

Ajax

$("#add_product").click(function(e){
    e.preventDefault();
    product_name = $("product_name").val();
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: $("#add_new_product").serialize(),
        success: function(response)
        {
            //
            alert(response);

        }
    })
});

[〜＃〜] php [〜＃〜]

if (0 < $_FILES['file']['error']) 
{
 echo ":!";
}
else 
{
echo "ASa";
}

ここで何が欠けていますか？

javascriptphpjqueryajaxfile-upload
13
Akshay

FormData()を使用してみてください：

$("form#files").submit(function(){

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

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

上記はサンプルコードですが、変更するために使用できます。

10
Praveen Kumar Purushothaman

formDataを使用できます

$("#add_product").click(function(e){
    e.preventDefault();
    var fdata = new FormData()
    
   fdata.append("product_name",$("product_name").val());
  
    if($("#file")[0].files.length>0)
       fdata.append("file",$("#file")[0].files[0])
    //d = $("#add_new_product").serialize();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data:fdata,
        contentType: false,
        processData: false, 
        success: function(response)
        {
            //
            alert(response);

        }
    })
});
 <!-- File Button --> 
    <div class="form-group">
    <label class="col-md-4 control-label" for="file">Upload Software / File</label>
    <div class="col-md-4">
    <input id="file" name="file" class="input-file" type="file">
    </div>
    </div>

<div class="form-group">
<label class="col-md-4 control-label" for="price">Price($)</label>  
<div class="col-md-4">
<input id="price" name="price" type="text" placeholder="Price" class="form-control input-md" required=""> 
</div>
</div>
9
Suhail Keyjani

最初に確認する必要があるのは、フォーム入力データとフォームファイルの両方を単一のFormData変数に追加する必要があることです。

このソリューションがすべての例に適合するように、Multi Fileオプションを有効にしたソリューションを次に示します。

入力コントロールにname属性を含めることはImportantです。ほとんどの場合。 C＃を使用している場合は、単にRequest.Form ["nameAttribute"]を使用して関数を取得できます。 Javaおよび他の言語でも同様です。

私のサンプルコードは

   $(document).ready(function () //Setting up on Document to Ready Function
    {
        $("#btnUpload").click(function (event) {

            //getting form into Jquery Wrapper Instance to enable JQuery Functions on form                    
            var form = $("#myForm1");

            //Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later.
            var params = form.serializeArray();

            //Getting Files Collection
            var files = $("#File1")[0].files;

            //Declaring new Form Data Instance  
            var formData = new FormData();

            //Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML.  
            for (var i = 0; i < files.length; i++) {
                formData.append(files[i].name, files[i]);
            }
            //Now Looping the parameters for all form input fields and assigning them as Name Value pairs. 
            $(params).each(function (index, element) {
                formData.append(element.name, element.value);
            });

            //disabling Submit Button so that user cannot press Submit Multiple times
            var btn = $(this);
            btn.val("Uploading...");
            btn.prop("disabled", true);

            $.ajax({
                url: "Handler.ashx", //You can replace this with MVC/WebAPI/PHP/Java etc
                method: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function () {
                    //Firing event if File Upload is completed!  
                    alert("Upload Completed");
                    btn.prop("disabled", false);
                    btn.val("Submit");
                    $("#File1").val("");

                },
                error: function (error) { alert("Error"); }

            });

        });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" id="myForm1">
    <p><textarea id="TextArea1" rows="2" cols="20" name="TextArea1"></textarea></p>
    <p><input id="File1" type="file" multiple="multiple" /></p>
    <input id="btnUpload" type="button" value="Submit" />
    </form>

作業例（ハンドラーを使用するasp.net C＃）については、 https://github.com/vibs2006/HttpFileHandlerFormDataSample のサンプルコードにアクセスできます。

7
vibs2006