[英]blueimp/jQuery-File-Upload SyntaxError: Unexpected token <
I am integrating the jQuery-File-Upload plugin into my php/mysqli site. 我正在将jQuery-File-Upload插件集成到我的php / mysqli网站中。 I am attempting to modify the code so that when the user uploads images the user's email will be added to the database.
我试图修改代码,以便当用户上传图像时,用户的电子邮件将被添加到数据库中。 I have added an email column to the database.
我已经向数据库添加了一个电子邮件列。 My problem is when the " Start Upload " button is clicked it adds the images to the folders but does not update the database with any of the info.
我的问题是,当单击“ 开始上传 ”按钮时,它会将图像添加到文件夹,但不使用任何信息更新数据库。 It throws an error, " SyntaxError: Unexpected token < " I have hunted the net with no luck and have tried multiple experiments with the code and still get the same error so any suggestions would be greatly appreciated.
它抛出一个错误,“ SyntaxError:Unexpected token < ”。我没有运气就在网上搜寻,并且尝试使用该代码进行了多次实验,但仍然收到相同的错误,因此任何建议将不胜感激。
Here is the index.html with the mods I did to add the email: 这是index.html,其中包含我添加电子邮件时所使用的mods:
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span><br><label class="title">
<span>Title:</span><br>
<input name="title[]" class="form-control">
</label>
<label class="description">
<span>Description:</span><br>
<input name="description[]" class="form-control">
</label>
<label class="email">
<span>Email:</span><br>
<input name="email[]" class="form-control">
</label>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span><br><p class="title"><strong>{%=file.title||''%}</strong></p>
<p class="description">{%=file.description||''%}</p>
<p class="email">{%=file.email||''%}</p>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
Here is the modified index.php : 这是修改后的index.php :
$options = array(
'delete_type' => 'POST',
'db_host' => 'localhost',
'db_user' => 'left-out-for-public-display',
'db_pass' => 'left-out-for-public-display',
'db_name' => 'left-out-for-public-display',
'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];
$file->email = @$_REQUEST['email'][$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`, `email`)'
.' VALUES (?, ?, ?, ?, ?, ?)';
$query = $this->db->prepare($sql);
$query->bind_param(
'sisss',
$file->name,
$file->size,
$file->type,
$file->title,
$file->description,
$file->email
);
$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`, `email` 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,
$email
);
while ($query->fetch()) {
$file->id = $id;
$file->type = $type;
$file->title = $title;
$file->description = $description;
$file->email = $email;
}
}
}
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);
?>
Okay I figured this out and it's working great now. 好的,我知道了,现在效果很好。 I wanted to share what I found just in case somebody else does a search on this same problem.
我想分享一下我发现的内容,以防其他人对此问题进行搜索。
The first problem: 第一个问题:
In the code above for the index.php: 在上面的index.php代码中:
$query->bind_param(
'sisss',
This won't fly because I've added a string but I forgot to add another s. 这不会成功,因为我添加了一个字符串,但是我忘了添加另一个s。
This code is now changed to: 该代码现在更改为:
$query->bind_param(
'sissss', //Added an s
I can't take any credit for this solution and I owe a big thank you to https://stackoverflow.com/users/2712069/tom-mcgee who provided my solution over at Add more custom variables to mysql insert on blueimp/jquery-file-upload 我对此解决方案一无所获 ,我非常感谢https://stackoverflow.com/users/2712069/tom-mcgee ,他在通过blueimp / jquery向mysql插入添加更多自定义变量时提供了我的解决方案。 -上传文件
The second problem: Totally self-inflicted but I digress... 第二个问题:完全是自欺欺人,但我离题了...
In the UploadHandler.php there is a piece of code like this: 在UploadHandler.php中,有一段代码如下:
protected function handle_form_data($file, $index) {
// Handle form data, e.g. $_POST['description'][$index]
}
Yours truly changed that code to this: 您的代码确实更改为:
protected function handle_form_data($file, $index) {
$_POST['email'][$index]
}
Once I returned this code back to the original form everything is good to go. 一旦我将此代码恢复为原始形式,一切就很好了。 I reckon having this function duplicated in two different files was not a proper approach.
我认为将此功能复制到两个不同的文件中不是一个正确的方法。
I would like to compliment Sebastian Tschan on this jQuery File Upload. 我想赞扬Sebastian Tschan的jQuery File Upload。 It's very excellent and very free.
它非常好,非常免费。 If you are looking for a good upload handler you can find Mr. Tschan on GitHub at https://github.com/blueimp
如果您正在寻找好的上传处理程序,则可以在GitHub上的Tschan先生处找到, 网址为https://github.com/blueimp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.