AjaxUpLoad.js实现文件上传功能

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

图1 文件上传前

 

图2 文件上传后 

1、创建页面并编写HTML

上传文档:  

<div 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="删除" /> 
</div> 

上传图片:  

<div 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="删除" /> 
</div> 

2、引用AjaxUpload.js文件 

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

3、编写JS脚本 

window.onload = function() { 
 init(); //初始化 
} 
  
//初始化 
function init() { 
 //初始化文档上传 
 var btnFile = document.getElementById("btnUploadFile"); 
 var doc = document.getElementById("doc"); 
 var hidFileName = document.getElementById("hidFileName"); 
 document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); }; 
 g_AjxUploadFile(btnFile, doc, hidFileName); 
  
 //初始化图片上传 
 var btnImg = document.getElementById("btnUploadImg"); 
 var img = document.getElementById("imgShow"); 
 var hidImgName = document.getElementById("hidImgName"); 
 document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); }; 
 g_AjxUploadImg(btnImg, img, hidImgName); 
} 
  
  
var g_AjxTempDir = "/file/temp/"; 
//文档上传 
function g_AjxUploadFile(btn, doc, hidPut, action) { 
 var button = btn, interval; 
 new AjaxUpload(button, { 
 action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action), 
 data: {}, 
 name: 'myfile', 
 onSubmit: function(file, ext) { 
 if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) { 
 alert("您上传的文档格式不对，请重新选择！"); 
 return false; 
 } 
 }, 
 onComplete: function(file, response) { 
 flagValue = response; 
 if (flagValue == "1") { 
 alert("您上传的文档格式不对，请重新选择！"); 
 } 
 else if (flagValue == "2") { 
 alert("您上传的文档大于2M，请重新选择！"); 
 } 
 else if (flagValue == "3") { 
 alert("文档上传失败！"); 
 } 
 else { 
 hidPut.value = response; 
 doc.innerHTML="<a href='" + g_AjxTempDir + response + "' target='_blank'>" + response + "</a>"; 
 } 
 } 
 }); 
} 
//图片上传 
function g_AjxUploadImg(btn, img, hidPut) { 
 var button = btn, interval; 
 new AjaxUpload(button, { 
 action: '/Common/UploadHandler.ashx?fileType=img', 
 data: {}, 
 name: 'myfile', 
 onSubmit: function(file, ext) { 
 if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) { 
 alert("您上传的图片格式不对，请重新选择！"); 
 return false; 
 } 
 }, 
 onComplete: function(file, response) { 
 flagValue = response; 
 if (flagValue == "1") { 
 alert("您上传的图片格式不对，请重新选择！"); 
 } 
 else if (flagValue == "2") { 
 alert("您上传的图片大于200K，请重新选择！"); 
 } 
 else if (flagValue == "3") { 
 alert("图片上传失败！"); 
 } 
 else { 
 hidPut.value = response; 
 img.src = g_AjxTempDir + response; 
 } 
 } 
 }); 
} 
  
//删除文档 
function DelFile(doc, hidPut) { 
 hidPut.value = ""; 
 doc.innerHTML = "<input type=\"text\" disabled=\"disabled\" />"; 
} 
  
//删除图片 
function DelImg(img, hidPut) { 
 hidPut.value = ""; 
 img.src = "/images/nophoto.gif"; 
} 

附件1：页面CSS样式

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

附件2：AjaxUpload.js文件

点击下载AjaxUpload.js文件

转自:https://www.jb51.net/article/135808.htm