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

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

app.js

$(function () { $('#fileupload').fileupload({ dataType: 'json', url: '../php/', add: function (e, data) { //$.each(data.files, function(index, file) { data.context = $('
') //.html(file.name+"") // 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+"") .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) { $('
').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

  '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); ?> 

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

我最需要帮助的两个function是将“删除”按钮链接到属于已选择的每个文件的每个

元素，然后简单地实现将上载文件的“开始上载”按钮。 我将使用示例php来处理文件。

如何实现每个

按钮的“删除按钮”？
到目前为止我做了什么：

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

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

感谢您的时间！