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:64px; border:1px solid #CCCCCC; display: block;}

附件2：AjaxUpload.js文件

相关推荐：

laravel和ajax实现文件上传功能

Ajax配合Spring实现文件上传功能代码

详解使用nodejs+express实现简单的文件上传功能

以上就是AjaxUpLoad.js如何实现文件上传功能的详细内容，更多请关注Gxl网其它相关文章！