本实例源码下载
先看效果图
点击增加按钮,会增加一个选择框,如下图:
选择要上传的图片,效果图如下:
上传成功如下图:
下面来看代码:
前台html主要代码:
因为用了JQuery,所以你完全可以把click事件放在js文件中
“增加”按钮js代码:
关于setTimeout("TajaxFileUpload()",1000);这句代码:因为所谓的批量上传,其实还是一个一个的上传,给用户的只是一个假象。只所以要延时执行TajaxFileUpload(),是因为在把图片上传到服务器上时,我在后台给图片重新命名了,命名的规则是,如下代码:
Random rd = new Random();即使我命名精确到毫秒,另外再加上随机数,可是还是有上传的第二张图片把上传的第一张图片覆盖的情况出现。所以此处我设置了延时1秒后在上传下一张图片。刚开始做这个东西的时候,用的是for循环,来把所有的图片一个一个的循环地用ajax上传,可是for循环速度太快了,可能第一张图片还没来得及ajax,第二张就被for过来了,还是有第二张覆盖第一张的情况出现。
下面来看TajaxFileUpload()函数,代码如下:
function TajaxFileUpload()面的代码没什么可说的,很容易看懂。下面来看Handler1.ashx(一般处理程序)如何来处理post过来的图片的(此代码来自网上,具体地址忘记了),下面只给出关键代码,
基本上这个批量上传图片的JQuery+ajax方式实现的程序完成了。如果你要上传word文档,PDF文件,只要稍作修改,就可以实现了!