簡體   English   中英

如何使用ajax將javascript圖像數組傳遞給Rails控制器

[英]how to pass javascript image array to rails controller using ajax

視圖

<div class="top-main-section-area">
   <div id="upload-area" class="uploader1"  onclick="$('#post_image').click()">
      <div class="message" id="slider-message">
         <center>
            <font color="#808080">click here to upload sliderimages</font>
         </center>
      </div>
      <%= f.file_field :images , array: true , type:'file' ,:onchange => 'readURL(this)',class:'slide-img',multiple: true, id:'files' %>
      <img id="slide_image" src="#" alt="image" style="display: none;" class="slide_image" />
   </div>
</div>

js文件

window.onload = function() {
    var array = [];
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

    function handleFileSelect(evt) {

        var count = 0;
        console.log("hariii");
        var files = evt.target.files;
        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
            count++;
            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                    // Render thumbnail.
                    var span = document.createElement('span');


                    span.innerHTML = [

                        '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
                        e.target.result,
                        '" title="', escape(theFile.name),
                        '"/>'
                    ].join('');

                    array.push(theFile.name);

                    document.getElementById('thumbnail').insertBefore(span, null);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
            //console.log(array);
        }
        //console.log(count);

        //console.log(array);

        return array;




    }


    $(function() {
        $('#slider-submit').on('click', function() {

            //console.log(array)

            console.log(JSON.stringify(array));

            $.ajax({
                type: "POST",
                url: "/usr_vendor_website/slidecreate",
                dataType: "json",
                data: {
                    A: JSON.stringify(array)
                },
                processData: false,
                contentType: 'application/json;',
                success: function(result) {
                    console.log('ok');
                    //alert("Item scuessfully added to the Cart");

                }
            })


        });

    })

}

Rails方法訪問線

@usr_vendor_web_slide.images = params[:A]

我嘗試將Rails上傳的圖像存儲在javascript數組中,然后將此數組傳遞給Rails控制器。 ajax部分在控制台日志中給出了成功的結果,但是在rails控制器中得到了nil對象。 我無法確定這是什么問題。 我的目標是將載波上傳圖像存儲在jquery數組中,然后使用rails控制器將其傳遞到postgresql數組列。欣賞您的想法並提供幫助。

我已解決問題。 刪除contentType和processData對我來說很好。 感謝所有評論意見的人的支持

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM