Jquery Blueimp - 从队列中删除文件

时间:2015-05-22 20:05:12

标签: jquery blueimp

首先,我必须说我在stackoverflow上有所有解决方案,但没有任何成功。我的问题非常简单我需要在点击开始上传按钮之前/之后从队列中删除文件,通过一次点击上传所有文件.... 我的代码:

            var indexProgressBar = 1;

        $('#fileupload').fileupload({
            autoUpload: false,
            url: url,
            dataType: 'json',
            sequentialUploads: true,
            singleFileUploads: true,
        }).on('fileuploadadd', function (e, data) {

            $.each(data.files, function (index, file) {
                var file = data.files[0];
                file.uploadID = 'progress' + indexProgressBar;
                file.uploadDivID = 'itemDiv' + indexProgressBar;
                file.fileId = 'deleteButton' + indexProgressBar;

                var node = $('<div id=' + file.uploadDivID + ' style="margin-bottom:20px; font-size:11px;"><span class="progress-filename" style="width:180px;">' + file.name + '</span ></div>');
                node.append('<img src="" id=' + file.fileId + ' alt="delete" /><br />');
                node.append('<div id="' + file.uploadID + '" class="progress" style="margin-bottom:0px; width:200px;" ><div class="progress-bar progress-bar-success"></div></div>');
                node.appendTo($('#filesToUpload'));

                node.find("img").click(function(){
                    node.remove();
                    });
                });

                indexProgressBar++;

                //upload Manualy
                $("#uploadBtn").on('click', function () {
                    data.submit();
                });
        }).on('fileuploaddone', function (e, data) {
            //upload Manualy
            $("#uploadBtn").off('click');

            var uploadDivID = data.files[0].uploadDivID; // returns 'someidentification'

            if (data.result.status == "OK") {
                $('#' + uploadDivID).fadeOut(1000, function () { $(this).remove(); });
            }
            else {
                $('#' + uploadDivID).append("<div style='color:red'>Error: " + data.result.errorMsg + "</div>");
            }

        }).on('fileuploadprogress', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            var progressID = data.files[0].uploadID; // returns 'someidentification'

            $('#' + progressID + ' .progress-bar').css(
                'width',
                progress + '%'
            );

            //}).on('fileuploadprogressall', function (e, data) {
            //var progress = parseInt(data.loaded / data.total * 100, 10);
            //    $('#progress .progress-bar').css(
            //        'width',
            //        progress + '%'
            //    );

        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');

问题是,这只能直观地删除文件,但我需要以某种方式从data.files中删除它,但我需要通过一个按钮上传所有文件....嗯......谢谢你的帮助。

1 个答案:

答案 0 :(得分:4)

我发现它如何完美地运作。在阵列的帮助下,它非常有用。

public class Validation
{

   public static void main( String[] args )
   {
      SwingUtilities.invokeLater( new Runnable()
      {
         public void run()
         {
            JFrame frame = new JFrame();

            Box vbox = Box.createVerticalBox();

            JFormattedTextField jff = new JFormattedTextField( 0.0f );
            vbox.add(jff);
            JTextField jt = new JTextField( 20 );
            vbox.add( jt );
            JLabel value = new JLabel( jff.getValue().toString() );
            vbox.add( value );
            frame.add( vbox );
            JButton b = new JButton( "Get Value" );
            b.addActionListener( new ActionListener()
            {

               @Override
               public void actionPerformed( ActionEvent e )
               {
                  value.setText( jff.getValue().toString() );
               }
            } );
            JPanel p = new JPanel();
            p.add( b );
            frame.add( p, BorderLayout.SOUTH );

            frame.pack();
            frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
            frame.setLocationRelativeTo( null );
            frame.setVisible( true );
         }
      } );
   }
}

首先我需要指定数组

            var a = [];

        var indexProgressBar = 0;

        $('#fileupload').fileupload({
            autoUpload: false,
            url: url,
            dataType: 'json',
            sequentialUploads: true,
            singleFileUploads: true,
        }).on('fileuploadadd', function (e, data) {

            $.each(data.files, function (index, file) {
                var file = data.files[0];
                file.uploadID = 'progress' + indexProgressBar;
                file.uploadDivID = 'itemDiv' + indexProgressBar;
                file.fileId = 'deleteButton' + indexProgressBar;

                var node = $('<div id=' + file.uploadDivID + ' style="margin-bottom:20px; font-size:11px;"><span class="progress-filename" style="width:286px; display:inline-block;">' + file.name + '</span ></div>');
                node.append('<img src="/_layouts/15/SkodaAuto.MarketingDatabank2.Project/Images/Icons/Delete-12.png" id=' + file.fileId + ' fileId=' + indexProgressBar + ' alt="delete" style="cursor:pointer;" /><br />');
                node.append('<div id="' + file.uploadID + '" class="progress" style="margin-bottom:0px; width:300px;" ><div class="progress-bar progress-bar-success"></div></div>');
                node.appendTo($('#filesToUpload'));

                node.find("img").click(function () {
                    a.push(file.fileId);
                    //data.files.splice($("#" + file.fileId).attr("fileId"), 1);

                    $(this).fadeOut(500, function () {
                        node.remove();
                    })

                });
            });

            indexProgressBar++;

            //upload Manualy
            $("#uploadBtn").on('click', function () {
                if ($.inArray(data.files[0].fileId, a) == -1) {
                    data.submit();
                }
            });
        }).on('fileuploadsend', function (e, data) {
            if ($.inArray(data.files[0].fileId, a) != -1) {
                return false;
            }
        }).on('fileuploaddone', function (e, data) {
            //upload Manualy
            $("#uploadBtn").off('click');

            var uploadDivID = data.files[0].uploadDivID; // returns 'someidentification'

            if (data.result.status == "OK") {
                $('#' + uploadDivID).fadeOut(1000, function () { $(this).remove(); });
            }
            else {
                $('#' + uploadDivID).append("<div style='color:red'>Error: " + data.result.errorMsg + "</div>");
            }

        }).on('fileuploadprogress', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            var progressID = data.files[0].uploadID; // returns 'someidentification'

            $('#' + progressID + ' .progress-bar').css(
                'width',
                progress + '%'
            );

            }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');

var a = [];

以及下一个

 a.push(file.fileId);

和这个

//upload Manualy
                $("#uploadBtn").on('click', function () {
                    if ($.inArray(data.files[0].fileId, a) == -1) {
                        data.submit();
                    }
                });

那就是......谢谢你