文件上传，无刷新文件上传可以查询文件大小，类型，进度条等

在现代Web应用中，文件上传是一项常见的功能，而无刷新文件上传则是在用户体验上的一大进步。无刷新文件上传，也称为异步文件上传，允许用户在不重新加载整个页面的情况下发送文件到服务器，大大提升了交互性和效率。在这个过程中，用户可以实时查看文件的大小、类型以及上传进度，为用户提供更好的反馈。 1. **文件选择API**： 在HTML5中，`<input type="file">`元素引入了File API，使得浏览器可以直接访问用户选定的文件。通过JavaScript，我们可以获取到文件的详细信息，如文件名、大小、类型等。例如，`event.target.files[0].name`返回文件名，`event.target.files[0].size`返回文件大小（字节），`event.target.files[0].type`返回MIME类型。 2. **预览功能**： 对于图片或某些类型的文件，我们可以在上传前提供预览。使用FileReader API，我们可以读取文件内容并显示在页面上。例如，`new FileReader().readAsDataURL(file)`将文件读取为数据URL，然后可以插入到`<img>`或`<object>`标签中。 3. **进度条展示**： HTML5的FormData对象配合XMLHttpRequest Level 2的progress事件，可以实现文件上传的进度追踪。当文件被分块发送时，每次发送都会触发progress事件，从而更新进度条。例如，`xhr.upload.onprogress = function(event) { progressHandler(event.loaded / event.total); }`，`progressHandler`函数负责计算并更新进度。 4. **多文件上传**： HTML5的File API支持同时选择和上传多个文件。通过设置`<input type="file">`的`multiple`属性，用户可以选取多个文件进行上传。 5. **跨域上传**： 如果文件上传涉及到跨域，需要服务器支持CORS（跨源资源共享）头，并在XMLHttpRequest中设置`withCredentials`为`true`，以允许携带身份凭证。 6. **文件限制**： 为了安全和性能考虑，通常会在前端进行一些文件大小和类型的验证。例如，可以设置`accept`属性限制可选择的文件类型，或者在选择文件后检查文件大小，超过限制则提示用户。 7. **AJAX与Promise**： 使用jQuery的`$.ajax`或原生的fetch API，结合Promise，可以优雅地处理异步上传过程，包括错误处理和成功回调。 8. **插件与库**： 实现无刷新文件上传功能，开发者通常会使用像jQuery Form、plupload、Dropzone.js等成熟库，它们封装了上述的许多细节，提供更高级的功能，如拖放上传、多部分上传等。 9. **安全性**： 需要注意防止CSRF攻击，可以通过在请求头添加令牌来验证请求来源。同时，对于大文件，应避免一次性加载到内存，而是采用流式上传。 10. **状态管理**： 在文件上传过程中，用户可能需要取消或重试。因此，维护一个文件上传队列，用于管理每个文件的上传状态，是非常重要的。 无刷新文件上传技术结合了HTML5的File API、XMLHttpRequest、Promise等技术，提供了丰富的用户交互体验。在实际开发中，还需要考虑到各种兼容性问题和安全策略，确保功能的稳定和用户体验。