web-dev-qa-db-ja.com

jQueryを介して画像をアップロードする方法

過去数日間、私はjQueryとAJAXでフォームを送信するのに苦労してきました。私が直面している問題は、フォームフィールドに画像をアップロードすることです。

私のフォームは次のようなものです：

<form action="#" method="GET" role="form" enctype="multipart/form-data">
 <input type="text" placeholder="Name" name="name">
 <input type="file" name="img" multiple>
  <button type="submit">Submit </button>
</form>

フォームの値を取得するためのjQueryスクリプトは次のようになります。

 $("form").submit(function (event) {
            $.dataArray = $(this).serializeArray(); // array of form data
            console.log($.dataArray);
            event.preventDefault();
        });

しかし、imageがnullを返す場合、これはimage 1を除くすべてのフィールド値を返します。

Dataarrayに保存するにはどうすればよいですか？

保存したいので、AJAXを介してサーバーに値を送信できます。

javascriptphpjqueryhtmlajax
8
Racoon

単一の画像をアップロードするには、このようにします

     <html>
        <head>
            <meta charset="UTF-8">
            <title>AJAX image upload with, jQuery</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function (e) {
                    $('#upload').on('click', function () {
                        var file_data = $('#file').prop('files')[0];
                        var form_data = new FormData();
                        form_data.append('file', file_data);
                        $.ajax({
                            url: 'http://localhost/ci/index.php/welcome/upload', // point to server-side controller method
                            dataType: 'text', // what to expect back from the server
                            cache: false,
                            contentType: false,
                            processData: false,
                            data: form_data,
                            type: 'post',
                            success: function (response) {
                                $('#msg').html(response); // display success response from the server
                            },
                            error: function (response) {
                                $('#msg').html(response); // display error response from the server
                            }
                        });
                    });
                });
            </script>
        </head>
        <body>
            <p id="msg"></p>

            <input type="file" id="file" name="file" multiple />
            <button id="upload">Upload</button>
        </body>
    </html>

複数の画像の場合、uは少し異なるループをする必要があります

8
Racoon

私は同様の質問を見つけました、それがあなたを助けることを願っています。

jqueryを使用して画像をアップロード

考慮すべき別のオプションは、Cloudinaryのような 画像をアップロードするjQueryプラグイン を使用して、それをHTMLページに含めることです。

 <script src='jquery.min.js' type='text/javascript'></script>
 <script src='jquery.cloudinary.js' type='text/javascript'></script>

次に、必要なすべてのjQueryファイルを含めます。

<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.ui.widget.js' type='text/javascript'></script>
<script src='jquery.iframe-transport.js' type='text/javascript'></script>
<script src='jquery.fileupload.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>
2
Dina Kaiser

画像のアップロードに使用しているコードに従ってください。

$.ajax({
            url: UPLOADURL,   // Url to which the request is send
            type: "POST",       // Type of request to be send, called as method
            data:  new FormData(this),// Data sent to server, a set of key/value pairs representing form fields and values
            contentType: false,// The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
            cache: false,// To unable request pages to be cached
            processData:false,// To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
            success: function(data)// A function to be called if request succeeds
            {

                data = JSON.parse(data);
                console.log(data);
                if(data.status == "Success"){
                    attachmentListing();
                    //$("#mailerMessage").html(data.data.mailStatus);
                    //$("#mailerMessage").fadeIn();
                    setTimeout(function () {
                        $("#mailerMessage").fadeOut();
                    },5000);
                }else{
                    toastr.warning(data.status);

                }
                $("#ajaxloader").addClass("hideajaxLoader");
            },
            error: function (jqXHR, errdata, errorThrown) {
                log("error");
                $("#ajaxloader").addClass("hideajaxLoader");
            }
        });
0
Deepak Patil

このコードを試してみてください、それは私にとってはうまくいきます。

 $("form").submit(function (event) {

    var form_data = new FormData($(this));

    $.ajax({
        url : url, 
        type : 'POST',
        data : form_data,
        processData: false,  // tell jQuery not to process the data
        contentType: false,
        success : function(resp){
        }
    });
});
0
Hitesh Vala Ahir

このコードを試してください。 formData()の使用

$("form").submit(function (event) {
            
    var formData = new FormData($(this));

    $.ajax({
          url: url,
          type: 'POST',
          data: formData,
          async: false,
          success: function (data) {
              //success callback
          },
          cache: false,
          contentType: false,
          processData: false
         });

   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="GET" role="form" enctype="multipart/form-data">
 <input type="text" placeholder="Name" name="name">
 <input type="file" name="img" multiple>
  <button type="submit">Submit </button>
</form>
0
Dinesh undefined

serialize（）メソッドはファイルデータをポストできません。

Ajaxを使用してファイルを送信するには、シリアル化する代わりにFormDataを使用します

HTML5はFormDataを導入して、開発者がフォームオブジェクトを動的に構築し、このフォームオブジェクトをAJAX経由で送信できるようにします。

your Html

<form action="upload_image.php" id="form_img" method="GET" role="form" enctype="multipart/form-data">
 <input type="text" placeholder="Name" name="name">
 <input type="file" name="img" multiple>
  <button type="submit">Submit </button>
</form>

AJAX呼び出し

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#form_img").submit(function(e){
            e.preventDefault();
            var formData = new FormData($("#form_img")[0]);

            $.ajax({
                url : $("#form_img").attr('action'),
                type : 'POST',
                data : formData,
                contentType : false,
                processData : false,
                success: function(resp) {
                    console.log(resp);                        
                }
            });
        });
    });

</script>

pload_image.php

print_r($_FILES) //check you get file data or not

この方法を試してください。

0
Nidhi