Question

我在谷歌搜索中遇到了jQuery-file-upload。我发现它很整洁，正是我需要的，但是我遇到了一个小问题，只需要几个功能就像我希望它使用基本插件一样。我认为基本插件最适合塑造和塑造我想要的东西。这是我到目前为止所做的。

app.js

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: '../php/',
        add: function (e, data) {
            //$.each(data.files, function(index, file) {
                data.context = $('<li class=\"list-group-item\">')
                    //.html(file.name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-remove\"></span></button>")
                    // see http://stackoverflow.com/questions/26234279/blueimp-jquery-upload-multiple-files-doesnt-work for the reason for the line below
                    .html(data.files[0].name+"<button type=\"button\" id=\"drop\" class=\"btn btn-danger btn-xs pull-right\"><span class=\"glyphicon glyphicon-remove\"></span></button>")
                    .appendTo(".list-group");
                /*$('.btn-danger').on('click', function() {
                    console.log('Drop '+file.name+' \n');
                });*/
            //});
            $('.btn-danger').on('click', function() {
                console.log("Removing all objects...\n");
                data.context.remove();
            });


        },
        submit: function (e, data) {
            $('#start-upload').on('click', function() {
                //$('#start-upload').addClass('#disabledInput');
                console.log("This is the start upload button!");
            });
        },
        done: function (e, data) {
            /*$.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('.files').find('#panel-body');
            });*/
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
        },
        drop: function (e, data) {
            //$.each(data.files, function (index, file) {
                //$('#btn-danger').on('click', function() {
                    console.log('Dropped file: '+ file.name +'\n');
                //});
            //});
        }
    }).on('fileuploadsubmit', function(e, data) {
        data.formData = data.context.find(':input').seralizeArray();
    });
});

../的PHP / index.php的

<?php
/*
 * jQuery File Upload Plugin PHP Example 5.14
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

$options = array(
    'delete_type' => 'POST',
    'db_host' => 'localhost',
    'db_user' => 'root',
    'db_pass' => '',
    'db_name' => 'example',
    'db_table' => 'files'
);

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');

class CustomUploadHandler extends UploadHandler {

    protected function initialize() {
        $this->db = new mysqli(
            $this->options['db_host'],
            $this->options['db_user'],
            $this->options['db_pass'],
            $this->options['db_name']
        );
        parent::initialize();
        $this->db->close();
    }

    protected function handle_form_data($file, $index) {
        $file->title = @$_REQUEST['title'][$index];
        $file->description = @$_REQUEST['description'][$index];
    }

    protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
        $file = parent::handle_file_upload(
            $uploaded_file, $name, $size, $type, $error, $index, $content_range
        );
        if (empty($file->error)) {
            $sql = 'INSERT INTO `'.$this->options['db_table']
                .'` (`name`, `size`, `type`, `title`, `description`)'
                .' VALUES (?, ?, ?, ?, ?)';
            $query = $this->db->prepare($sql);
            $query->bind_param(
                'sisss',
                $file->name,
                $file->size,
                $file->type,
                $file->title,
                $file->description
            );
            $query->execute();
            $file->id = $this->db->insert_id;
        }
        return $file;
    }

    protected function set_additional_file_properties($file) {
        parent::set_additional_file_properties($file);
        if ($_SERVER['REQUEST_METHOD'] === 'GET') {
            $sql = 'SELECT `id`, `type`, `title`, `description` FROM `'
                .$this->options['db_table'].'` WHERE `name`=?';
            $query = $this->db->prepare($sql);
            $query->bind_param('s', $file->name);
            $query->execute();
            $query->bind_result(
                $id,
                $type,
                $title,
                $description
            );
            while ($query->fetch()) {
                $file->id = $id;
                $file->type = $type;
                $file->title = $title;
                $file->description = $description;
            }
        }
    }

    public function delete($print_response = true) {
        $response = parent::delete(false);
        foreach ($response as $name => $deleted) {
            if ($deleted) {
                $sql = 'DELETE FROM `'
                    .$this->options['db_table'].'` WHERE `name`=?';
                $query = $this->db->prepare($sql);
                $query->bind_param('s', $name);
                $query->execute();
            }
        } 
        return $this->generate_response($response, $print_response);
    }

}

$upload_handler = new CustomUploadHandler($options);

?>

Basic layout of my buttons and file list.

在我的html中，我还有一个Select Files ...按钮和一个Start Upload按钮。 “选择文件”按钮完美运行。我可以毫无问题地添加文件。一次多个，或一次一个。

我最需要帮助的两个功能是将“删除”按钮链接到属于所选文件的每个<li>元素，然后只需实现将上传文件的“开始上传”按钮。我将使用示例php来处理文件。

如何实施每个<li>按钮的“删除按钮”？
到目前为止我做了什么：

将“删除”按钮添加到每个列表元素
为用户实现一种单击“删除”按钮的方法，并将所单击的li元素的文件名记录到控制台。但是，此日志重复x次多次，其中x是li元素相对于顶部的位置。

如何实施“开始上传”按钮以开始上传？
我不完全确定php文件如何绑定到jQuery中，以便在按下提交按钮时执行。我知道.on操作已附加到.fileupload，但如果有人可以帮助解释所有内容是如何结合在一起的，那么我们将非常感激。

感谢您的时间！

自定义jQuery-File-Upload（基本插件）

app.js

../的PHP / index.php的

0 个答案: