我碰到jQuery 文件上传 https://github.com/blueimp/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);
?>
在我的 html 中，我还有一个“选择文件...”按钮和一个“开始上传”按钮。 “选择文件”按钮工作正常。我可以毫无问题地添加文件。一次多个，或一次一个。
我最需要帮助的两个功能是将“删除”按钮链接到每个功能<li>属于已选择的每个文件的元素，然后只需实现将上传文件的“开始上传”按钮。我将使用示例 php 来处理文件。
我怎样才能实现每个的“删除按钮”<li> button?
到目前为止我所做的：
- 向每个列表元素添加“删除”按钮
- 实现一种让用户单击删除按钮和单击的文件名的方法
li元素被记录到控制台。然而，该日志重复 x 次，其中 x 是该日志的位置li元素相对于顶部。
如何实现“开始上传”按钮来开始上传？
我不太确定如何php文件被绑定到 jQuery 中，以便在按下提交按钮时执行。我知道.on操作附加到.fileupload但如果有人能帮助解释一切是如何结合在一起的，我将不胜感激。
感谢您的时间！
