JQuery+ajax实现批量上传图片(自写)

关于图片上传，网上关于单张图片通过jquery+ajax方式上传的代码随手可得，但批量上传的实现却较为稀缺。为了满足这一需求，我决定亲自编写一个批量上传的程序。让我来为您展示下实现过程及效果。

通过点击“增加”按钮，便会增加一个选择框，用户可以看到一个新增的选择框界面。在选择框中，用户可以自由选择要上传的图片。

一旦选择了图片，界面会展示出所选图片预览图。用户可以选择继续添加图片或点击“确定上传”按钮进行上传操作。

关于代码实现部分，以前端的html代码为例，主要包含了上传按钮、增加选择框的按钮以及图片选择的输入框等。其中，由于使用了JQuery，所有的点击事件都可以放在js文件中处理。

“增加”按钮的js代码主要负责增加选择框的数量，并动态生成相应的html代码添加到页面中。而“确定上传”按钮的js代码则负责启动上传操作。这里使用了一个关键的技巧：通过setTimeout函数延迟执行TajaxFileUpload()函数。

为什么要延迟执行呢？因为所谓的批量上传，其实是单张单张地依次上传，给用户一种可以同时上传多张图片的假象。在服务器端，我为每一张上传的图片都进行了重命名操作，确保每张图片都有一个独特的文件名。尽管我已经精确到了毫秒级，并添加了随机数来避免命名冲突，但在实际操作中，还是偶尔会出现后上传的图片覆盖先上传的图片的情况。我设置了1秒的延迟，确保每一张图片都能独立、有序地完成上传操作。

刚开始接触这个任务时，我们最初使用的是for循环来逐个上传所有图片，利用ajax进行异步传输。由于for循环的执行速度过快，经常出现在第一张图片还未完成ajax上传时，第二张图片已经通过for循环开始上传，甚至出现了第二张覆盖第一张的情况。

针对狼蚁网站的SEO优化，我们采用了TajaxFileUpload()函数来处理图片上传。让我们来看一下具体的代码实现。

在TajaxFileUpload()函数中，我们首先检查当前上传的图片数量是否小于允许上传的总数加一并进行相应的处理。准备提交时，我们更新上传图片的显示状态，展示一个加载图标。然后，通过ajax发起POST请求，将图片和相关数据发送到服务器。

服务器的处理逻辑由Handler1.ashx（一般处理程序）完成。关于Handler1.ashx的代码实现，这里并没有给出具体的细节，但可以确定的是，它会接收并处理通过POST请求发送过来的图片数据。处理完成后，它会返回相应的响应数据。

在客户端，我们监听ajax请求的响应。如果返回的数据中第一个元素为“1”，表示上传成功。我们更新上传图片的显示状态，展示一个表示成功的图标，并携带上传成功的文件名和消息提示。如果返回的数据中第一个元素不是“1”，则表示上传失败，我们更新上传图片的显示状态，展示一个表示错误的图标，并携带相关的错误消息。

完成一次上传后，我们会增加当前上传图片的索引号，然后调用TSubmitUploadImageFile()函数继续处理下一张图片。这个过程会不断重复，直到所有的图片都完成上传。

程序中的文件上传之旅

在这段代码中，我们首先遇到的是文件上传的起始点。起初，我们定义了一个空字符串`_fileNamePath`来存储即将上传的文件路径。然后，在尝试块中，我们从表单中获取文件路径并将其赋值给`_fileNamePath`。紧接着，我们调用`UpLoadFile(_fileNamePath)`函数来执行文件上传操作，并将上传结果写入响应中。如果在这个过程中发生任何错误，我们会捕获异常并将错误信息“上传提交出错”返回给客户端。

在文件上传之前，我们需要生成一个随机的文件名以保存上传的文件。通过调用`GetFileName()`函数和附加文件扩展名，我们可以得到将要保存的文件名。接着，我们映射文件的物理路径并检查该路径是否存在，如果不存在则创建相应的目录。然后，我们创建一个WebClient实例并为它设置Windows网络安全凭据。随后，我们打开文件流并使用BinaryReader读取文件内容。

在准备上传文件之前，我们需要检查文件是否合法。`CheckFileExt`函数帮助我们验证文件的扩展名是否在允许的列表中，例如“.gif”, “.jpg”, “.jpeg”。这是一个重要的步骤，确保我们只处理特定类型的文件。

接下来是生成随机文件名的详细过程。`GetFileName`方法巧妙地结合了当前日期和时间的字符串表示以及一个随机数字来生成一个独特的文件名。这个文件名既保证了独特性又具有一定的规律性和可读性。

关于上传文件本身，我们使用之前创建的WebClient实例和打开的文件流进行上传操作。如果一切正常，文件内容将被写入到目标路径。值得注意的是，这个程序不仅支持图片上传，还可以通过简单的修改实现Word文档和PDF文件的上传。

这个程序巧妙地运用了JQuery和ajax的方式来实现批量图片上传，为用户提供了一个流畅且高效的体验。无论是上传图片、Word文档还是PDF文件，这个程序都展现了其强大的功能和灵活的适应性。它通过严格的文件检查机制确保了上传过程的稳定性和安全性，同时提供了流畅的用户交互体验。这是一个功能强大且易于扩展的文件上传解决方案。