jQuery-File-Upload - 仅显示以特定文件名开头的文件
Posted
技术标签:
【中文标题】jQuery-File-Upload - 仅显示以特定文件名开头的文件【英文标题】：jQuery-File-Upload - Show ONLY files starting with specific file name 【发布时间】：2019-10-18 00:55:00 【问题描述】：如何将其设置为仅显示以特定文件名开头的文件而不显示文件夹中的所有文件？？
示例：文件夹中的文件：
1111_file1.jpg
1111_file2.jpg
2222_anotherfile.jpg
2222_anotherfile2.jpg
3333_anotherfile4.jpg
我只想显示以1111_ 开头的文件
我正在使用 LINK 此处找到的 AngularJS 版本
我唯一改变的是我添加了一个隐藏的输入来设置值，例如：<input type="hidden" name="wo" value="1111_">
下面是代码：
<!DOCTYPE html>
<!--
/*
* jQuery File Upload Plugin AngularJS Demo
* https://github.com/blueimp/jQuery-File-Upload
*
* Copyright 2013, Sebastian Tschan
* https://blueimp.net
*
* Licensed under the MIT license:
* https://opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo - AngularJS version</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for AngularJS. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (php, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with javascript disabled -->
<noscript><link rel="stylesheet" href="css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="css/jquery.fileupload-ui-noscript.css"></noscript>
<style>
/* Hide Angular JS elements before initializing */
.ng-cloak
display: none;
</style>
</head>
<body>
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="'fileupload-processing': processing() || loadingFiles">
<input type="hidden" name="wo" value="1111_">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="error.asp"></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" ng-class="disabled: disabled">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="in: active()">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="width: num + '%'"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="'processing': file.$processing()">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="file.url" title="file.name" download="file.name" data-gallery><img data-ng-src="file.thumbnailUrl" ></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="file.url" title="file.name" download="file.name" data-gallery>file.name</a>
<a data-ng-switch-default data-ng-href="file.url" title="file.name" download="file.name">file.name</a>
</span>
<span data-ng-switch-default>file.name</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">file.error</strong>
</td>
<td>
<p class="size">file.size | formatFileSize</p>
<div class="progress progress-striped active fade" data-ng-class="pending: 'in'[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="width: num + '%'"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form>
<br>
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" integrity="sha384-r6jjWwxAypHaESwS5an5J9dkfzwQuKVNV9FZM9B6fnt8PFuY0cVwLhV7BltCZhLy" crossorigin="anonymous"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- blueimp Gallery script -->
<script src="https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<!-- The File Upload Angular JS module -->
<script src="js/jquery.fileupload-angular.js"></script>
<!-- The main application script -->
<script src="js/app.js"></script>
</body>
</html>
或者如果 URL 是 &startingwith=1111_，它只会显示以 1111_ 开头的文件
【问题讨论】：
我认为仅无法从客户端隐藏不匹配的文件。所以，可能你必须使用一些服务器端代码。为此，您应该指定您使用的服务器类型。 我们可以得到一个可用的演示吗？ 嗨@rv7 但是js如何显示所有这些文件？我很难相信我无法遍历这些结果并获得不需要显示的结果 @Deckerz 有一个发布的 LINK（见上文）是一个工作示例 @compcobalt 那是一个演示站点，而不是可变代码的摆弄 【参考方案1】：您可以使用 JS 检查上传的文件是否有有效的文件名。我创建了以下函数来检查上传的文件名是否以“1111_”开头。
function checkFileForValidFilename()
var fileUploadID = document.getElementById("fileUploadID");
var aryFiles = fileUploadID.files;
for (var i = 0; i < aryFiles.length; i++)
var fileName = aryFiles[i].name.startsWith("1111_");
if(!fileName)
alert("Please upload file with name starting with 1111_");
else
alert("Done.");
<input id="fileUploadID" type="file" name="files[]" multiple ng-disabled="disabled">
<input type="button" value="Check" onclick="checkFileForValidFilename();" />让我知道它是否适合你。
【讨论】：
您好，我需要过滤掉现有文件以仅显示以“1111_”开头的文件 你有文件名数组吗？或者你有上传/存储文件的路径吗？ 全部来自 \server\php\UploadHandler.php 中的文件，它将文件发布到名为 files 的目录 查看这个使用 PHP 列出目录中文件的答案。 ***.com/a/15774702/8478475 这行得通吗？然后您可以进行验证以仅允许某些类型的文件。如果我理解得很好，请告诉我。以上是关于jQuery-File-Upload - 仅显示以特定文件名开头的文件的主要内容，如果未能解决你的问题，请参考以下文章
blueimp jQuery-File-Upload 上传图片后不显示缩略图
进度回调总是在jquery-file-upload插件中显示100％上传
JQuery-File-Upload BlueImp文件上传EXIF方向旋转
如何将项目 Expressjs 与 jQuery-File-Upload 集成？