我想要一个带有进程条的jQuery多文件上传器。这就是为什么我去了url。在这里有一个名为basic的选项。我刚刚下载了所有文件,我只使用了basic.html文件。使用basic.html文件代码,我可以轻松上传文件。但我想要一些限制,以便用户只上传某种文件,如png,jpg和gif。所以要在上传中使用限制我检查了文档,我得到了这个link。 所以我混合了所有这些代码
<div class="container">
<!-- 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>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === '' ?
'//jquery-file-upload.appspot.com/' : 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
options: {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
processQueue: [
action: 'validate',
acceptFileTypes: '@',
disabled: '@disableValidation'
]
},
processActions: {
validate: function (data, options) {
if (options.disabled) {
return data;
}
var dfd = $.Deferred(),
file = data.files[data.index],
if (!options.acceptFileTypes.test(file.type)) {
file.error = 'Invalid file type.';
dfd.rejectWith(this, [data]);
} else {
dfd.resolveWith(this, [data]);
}
return dfd.promise();
}
}
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: 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');
});
</script>
但是在这里我无法上传任何文件也无法上传限制。在我的firefox控制台选项卡中的所有代码之后,我收到了类似
的错误SyntaxError: missing ] after element list
action: 'validate',
有人可以告诉我为什么会出现这个错误吗?怎么解决这个?任何帮助和建议都会非常明显。感谢..
答案 0 :(得分:0)
在processActions
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = window.location.hostname === '' ?
'//jquery-file-upload.appspot.com/' : 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
options: {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
processQueue: [
action: 'validate',
acceptFileTypes: '@',
disabled: '@disableValidation'
],
processActions: {
validate: function (data, options) {
if (options.disabled) {
return data;
}
var dfd = $.Deferred(),
file = data.files[data.index],
if (!options.acceptFileTypes.test(file.type)) {
file.error = 'Invalid file type.';
dfd.rejectWith(this, [data]);
} else {
dfd.resolveWith(this, [data]);
}
return dfd.promise();
}
},
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
} // end of options
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});