HTML5实现的多图预览Ajax上传技术解析

"这篇资源主要介绍了如何利用HTML5的新特性实现可预览多图片的Ajax上传功能，对比了HTML5之前依赖Flash的上传方式，并提供了一个基于HTML5的多图Ajax上传demo，以及核心脚本`zxxFile.js`的简单剖析。" 在Web开发中，图片上传是一个常见的需求。在XHTML时期，由于技术限制，通常只能通过HTML的`<input type="file">`控件单次上传一张图片。为了实现多图片上传，开发者通常需要借助Flash技术，如使用SWFUpload.js库。然而，这种方式存在一些问题，如Flash文件需要与页面在同一父文件夹，JavaScript文件体积大，且对用户来说可能不够友好。 随着HTML5的普及，这些问题得到了解决。HTML5引入了对多文件选择的支持，允许用户通过一个文件选择对话框同时选取多个文件。此外，HTML5还支持使用Ajax进行异步文件上传，无需刷新页面即可完成文件传输。更令人兴奋的是，HTML5提供了文件API，允许在文件上传之前预览图片，甚至支持图片的拖放上传功能，大大提升了用户体验。 文中提到了一个基于HTML5的多图片Ajax上传的示例，这个示例在最新的Firefox或Chrome浏览器中可以正常运行。用户可以通过点击文件选择控件或直接拖放图片到指定区域来上传图片。在上传过程中，系统会对图片进行验证，如检查文件类型和大小，确保只有符合要求的图片才能被上传。用户还可以在上传前预览图片，甚至在上传前删除不需要的图片。上传完成后，系统会返回上传后的图片地址。 为了实现这一功能，作者提供了一个名为`zxxFile.js`的核心脚本，这是一个轻量级的JavaScript文件，主要负责文件选择、删除等上传逻辑，与jQuery、YUI、MooTools等库兼容。`zxxFile.js`定义了一个名为`ZXXFILE`的对象，包含了上传过程中的关键操作和属性，如文件对象（`file object`）的相关处理。 这个资源提供了一个实用的HTML5多图片Ajax上传方案，利用了HTML5的新特性，简化了上传流程，提高了用户体验，同时给出了核心脚本供开发者参考和使用。对于想要在项目中实现类似功能的开发者来说，这是一个非常有价值的参考资料。