首页 > 开发 > AJAX > 正文

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

2024-09-01 08:29:06
字体:
来源:转载
供稿:网友

在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的。
先看效果图

JQuery+ajax实现批量上传图片

点击增加按钮,会增加一个选择框,如下图:

JQuery+ajax实现批量上传图片


选择要上传的图片,效果图如下:

JQuery+ajax实现批量上传图片


上传成功如下图:

JQuery+ajax实现批量上传图片

JQuery+ajax实现批量上传图片

下面来看代码:
前台html主要代码:
代码如下:
<button id="SubUpload" class="ManagerButton" onClick="TSubmitUploadImageFile();return false;">确定上传</button>  
<button id="CancelUpload" class="ManagerButton" onClick="javascript:history.go(-1);">取消</button>  
<button id="AddUpload" class="ManagerButton" onClick="TAddFileUpload();return false;">增加</button>
<tr><td class="tdClass">
图片1:
</td><td class="tdClass">
<input name="" size="60" id="uploadImg1" type="file" />
<span id="uploadImgState1"></span>
</td></tr>

因为用了JQuery,所以你完全可以把click事件放在js文件中
“增加”按钮js代码:
代码如下:
var TfileUploadNum=1; //记录图片选择框个数
var Tnum=1; //ajax上传图片时索引
function TAddFileUpload()
{
var idnum = TfileUploadNum+1;
var str="<tr><td class='tdClass'>图片"+idnum+":</td>";
str += "<td class='tdClass'><input name='' size='60' id='uploadImg"+idnum+"' type='file' /><span id='uploadImgState"+idnum+"'>";
str += "</span></td></tr>";
("#imgTable").append(str);
TfileUploadNum += 1;
}


“确定上传”按钮js代码:
代码如下:
function TSubmitUploadImageFile()
{
M("SubUpload").disabled=true;
M("CancelUpload").disabled=true;
M("AddUpload").disabled=true;
setTimeout("TajaxFileUpload()",1000);//此为关键代码
}

关于setTimeout("TajaxFileUpload()",1000);这句代码:因为所谓的批量上传,其实还是一个一个的上传,给用户的只是一个假象。只所以要延时执行TajaxFileUpload(),是因为在把图片上传到服务器上时,我在后台给图片重新命名了,命名的规则是,如下代码:
代码如下:
Random rd = new Random();

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表