掉落功能不起作用

时间:2018-05-10 14:58:57

标签: javascript drag-and-drop

我想通过拖放同时保存图像并单击功能。我为点击功能和拖放功能编写了脚本。点击功能正常工作,但掉线功能不起作用。我不知道哪里出错......

<div align="center">
            <input type="file" name="file" id="file"/>
           <div id="dock" class="dock">

            Drag & Drop Photos Here</div>

            </div>

下面是我的javascript函数。我调用了两个ajax function.one用于click函数,另一个用于drop函数。

$(document).ready(function() {
                    $("#dock").click(function(){
                    $("#file").click();
                });

                       $("#file").change(function(){
                    var fd = new FormData();
           var files = $('#file')[0].files[0];
            fd.append('file',files);
           uploadData(fd);
                });
                    $('#dock').on('dragenter', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                    });  
                    $('#dock').on('drop', function(e){ t
                        if (e.originalEvent.dataTransfer) {

                            if (e.originalEvent.dataTransfer.files.length) { 
                                e.preventDefault();
                                e.stopPropagation();
                            upload(e.originalEvent.dataTransfer.files);
                            }
                        }
                    });

                    function upload(files){
                    var fd1 = new FormData();
                    for (var i = 0; i < files.length; i++) { 
                fd1.append('file_' + i, files[i]); 
                        }
                        fd1.append('nbr_files', i); 
                        $.ajax({ // JQuery Ajax
                            type: 'POST',
                            url: 'ajax/tuto-dd-upload-image.php',
                            data: fd1, 
                            processData: false,
                            contentType: false,
                            success: function(data) {
                             alert(data);
                                $('#result').html(data);

                            },

                        });
                    }
                function uploadData(formdata){

            $.ajax({
                url: 'upload.php',
                type: 'post',
                data: formdata,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response){
                    alert(response);
                }
            });
        }
        });

0 个答案:

没有答案