dragon8837 2017-03-30 02:16
浏览 212
已采纳

如何在AJAX中使用FormData?

Is there way to make single var and function in the same time ? If it's possible, how to take the single var #id and then put it into FormData ? The following foo.php looks like:

.
.
.
<input type="hidden" id="id" name="id" value="<?php echo $_GET['id']; ?>" />
<div id="dock" class="dock">Drag & Drop Photos Here</div>
.
.
.
<script type="text/javascript" src="script/tuto-dd-upload-image.js"></script>

tuto-dd-upload-image.js has included:

$(document).ready(function() {

    // Add eventhandlers for dragover and prevent the default actions for this event
    $('#dock').on('dragover', function(e) {
        $(this).attr('class', 'dock_hover'); // If drag over the window, we change the class of the #dock div by "dock_hover"
        e.preventDefault();
        e.stopPropagation();
    });

    // Add eventhandlers for dragenter and prevent the default actions for this event
    $('#dock').on('dragenter', function(e) {
        e.preventDefault();
        e.stopPropagation();
    });

    $('#dock').on('dragleave', function(e) {
        $(this).attr('class', 'dock'); // If drag OUT the window, we change the class of the #dock div by "dock" (the original one)
    });

    // When drop the images
    $('#dock').on('drop', function(e){ // drop-handler event
        if (e.originalEvent.dataTransfer) {
            $('.progress-bar').attr('style', 'width: 0%').attr('aria-valuenow', '0').text('0%'); // Bootstrap progress bar at 0%
            if (e.originalEvent.dataTransfer.files.length) { // Check if we have files
                e.preventDefault();
                e.stopPropagation();
                // Launch the upload function
                upload(e.originalEvent.dataTransfer.files); // Access the dropped files with e.originalEvent.dataTransfer.files
            }
        }
    });

    function upload(files){ // upload function
        var fd = new FormData(); // Create a FormData object
        for (var i = 0; i < files.length; i++) { // Loop all files
            fd.append('file_' + i, files[i]); // Create an append() method, one for each file dropped
        }
        fd.append('nbr_files', i); // The last append is the number of files
        fd.$('#id').val();
        $.ajax({ // JQuery Ajax
            type: 'POST',
            url: 'ajax/tuto-dd-upload-image.php', // URL to the PHP file which will insert new value in the database
            data: fd, // We send the data string
            processData: false,
            contentType: false,
            success: function(data) {
                $('#result').html(data); // Display images thumbnail as result
                $('#dock').attr('class', 'dock'); // #dock div with the "dock" class
                $('.progress-bar').attr('style', 'width: 100%').attr('aria-valuenow', '100').text('100%'); // Progress bar at 100% when finish
            },
            xhrFields: { //
                onprogress: function (e) {
                    if (e.lengthComputable) {
                        var pourc = e.loaded / e.total * 100;
                        $('.progress-bar').attr('style', 'width: ' + pourc + '%').attr('aria-valuenow', pourc).text(pourc + '%');
                    }
                }
            },
        });
    }

});

After those both php and js, the data will be sent to tuto-dd-upload-image.php and here's following tuto-dd-upload-image.php code:

.
.
.
$imgType = $_FILES["file_".$i]["type"];
$imgSize = $_FILES["file_".$i]["size"];
$id = $_POST['id'];
echo $imgType;
echo $imgSize;
echo $id;
.
.
.

Unfortunately, at the same time $imgType and imgSize are appeared whereas $id are not appeared. How to tucking #id into FormData ? I think there's something way but limitation of my brain and skill as for jquery and ajax. Thank you.

  • 写回答

1条回答 默认 最新

  • douyanjing8287 2017-03-30 02:29
    关注

    You must append it your form data

    change

    fd.$('#id').val();
    

    to

    fd.append('id', $('#id').val());
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 请问Ubuntu要怎么安装chrome呀?
  • ¥15 视频编码 十六进制问题
  • ¥15 Xsheii7我安装这个文件的时候跳出来另一个文件已锁定文件的无一部分进程无法访问。这个该怎么解决
  • ¥15 unity terrain打包后地形错位,跟建筑不在同一个位置,怎么办
  • ¥15 FileNotFoundError 解决方案
  • ¥15 uniapp实现如下图的图表功能
  • ¥15 u-subsection如何修改相邻两个节点样式
  • ¥30 vs2010开发 WFP(windows filtering platform)
  • ¥15 服务端控制goose报文控制块的发布问题
  • ¥15 学习指导与未来导向啊