uploadify获取文件名

Uploadify是一款广泛使用的JavaScript插件，它允许用户在网页上实现多文件上传功能。这个插件简化了文件上传的交互过程，提供了丰富的自定义选项，以及优雅的用户体验。在2.1.4版本中，Uploadify继续提供稳定且高效的文件上传服务。 在Uploadify中，获取文件名是一个常见的需求，这在处理用户上传的文件时非常有用。例如，你可能需要显示已选择文件的列表，或者在上传前验证文件类型。以下是如何在Uploadify中获取文件名的步骤和相关知识点： 1. 初始化Uploadify： 在HTML代码中，你需要创建一个`<input>`元素来作为文件选择器，并通过`id`属性指定Uploadify将绑定到哪个元素。然后，在页面加载完成后，使用JavaScript进行初始化，设置相关参数，如`swf`（Flash对象的路径）、`uploader`（服务器端的上传处理脚本）等。 ```html <input id="fileInput" name="fileInput" type="file" /> <script> $(function() { $('#fileInput').uploadify({ 'swf': 'uploadify.swf', 'uploader': 'upload.php' }); }); </script> ``` 2. 使用事件监听器获取文件名： Uploadify提供了多种事件，如`onSelect`、`onQueueFull`、`onUploadStart`等，可以监听文件选择、上传开始等操作。在`onSelect`事件中，你可以获取到用户选择的文件名。 ```javascript $(function() { $('#fileInput').uploadify({ 'swf': 'uploadify.swf', 'uploader': 'upload.php', 'onSelect': function(event, ID, fileObj) { console.log('Selected file: ' + fileObj.name); } }); }); ``` 3. 文件名的处理： 在`onSelect`事件回调函数中，`fileObj`对象包含了关于选定文件的信息，包括`name`属性，这就是文件名。你可以根据需要进行处理，比如显示在页面上，或者用于进一步的验证。 4. 其他有用的信息： 除了文件名，`fileObj`还包含了其他有用的信息，如`size`（文件大小）、`type`（MIME类型）等，这些都可以用来做额外的文件验证或显示。 5. 处理多个文件： 如果允许用户一次选择多个文件，`onSelect`事件会在每个文件被选中时触发。你可以利用这个特性来跟踪所有选择的文件，构建一个文件列表。 6. 提供反馈： 为了提供更好的用户体验，你可以在用户选择文件后更新UI，显示文件名或进度信息。例如，可以使用`queueID`属性创建一个队列元素，并在每次`onSelect`事件时更新它。 7. 服务器端处理： 虽然这里主要讨论的是前端获取文件名，但别忘了在服务器端也需要处理文件上传。`uploader`参数指定的脚本应该能接收并处理文件，包括保存文件、验证权限等。 Uploadify 2.1.4版本通过其事件机制提供了方便的方式来获取用户选择的文件名。结合适当的JavaScript和服务器端代码，你可以实现一个功能完备、用户体验良好的文件上传系统。