AjaxUpLoad.js如何实现文件上传功能

来源：爱玩科技网

本文主要为大家详细介绍了AjaxUpLoad.js实现文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

AjaxUpLoad.js的使用实现无刷新文件上传，如图。

图1 文件上传前

图2 文件上传后

1、创建页面并编写HTML

上传文档:

<p class="uploadFile"> 
 <span id="doc"><input type="text" disabled="disabled" /></span> 
 <input type="hidden" id="hidFileName" /> 
 <input type="button" id="btnUploadFile" value="上传" /> 
 <input type="button" id="btnDeleteFile" value="删除" /> 
</p>

上传图片:

<p class="uploadImg"> 
 <img id="imgShow" src="/images/nophoto.gif" /> 
 <input type="hidden" id="hidImgName" /> 
 <input type="button" id="btnUploadImg" value="上传" /> 
 <input type="button" id="btnDeleteImg" value="删除" /> 
</p>

2、引用AjaxUpload.js文件

<script src="/js/common/AjaxUpload.js" type="text/javascript"></script>

3、编写JS脚本

4、创建/Common/UploadHandler.ashx处理程序

附件1：页面CSS样式

/*上传文件*/ 
.uploadFile{margin-bottom:10px;} 
/*上传图片*/ 
.uploadImg{} 
.uploadImg img{width:102px; height:px; border:1px solid #CCCCCC; display: block;}

附件2：AjaxUpload.js文件