Javascript使用SWFUpload进行多文件上传


Posted in Javascript onNovember 16, 2016

SWFUpload可以说是目前最好的多文件上传工具之一,虽然它是基于flash插件开发的,但是相比目前很多js多文件上传还是具有很多优点:

  • 可以同时选择多个文件上传(注意是以此选择文件)
  • 无刷新上传
  • 可以显示进度条
  • 良好的浏览器兼容性
  • 兼容其他js类库

SWFUpload另个优点就是它优秀的设计,它提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面的内容。

下面是SWFUpload在具体使用过程中js代码
MultiFileHandler.js

function fileQueueError(file, errorCode, message) { 
  try { 
    var imageName = "error.gif"; 
    var errorName = ""; 
    if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) { 
      errorName = "文件超过最大上传个数!"; 
    } 
 
    if (errorName !== "") { 
      alert(errorName); 
      return; 
    } 
 
    switch (errorCode) { 
    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 
      imageName = "zerobyte.gif"; 
      break; 
    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 
      imageName = "toobig.gif"; 
      break; 
    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 
    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: 
    default: 
      alert(message); 
      break; 
    } 
 
    addImage("/modules/commons/view/multifileupload/images/" + imageName); 
 
  } catch (ex) { 
    this.debug(ex); 
  } 
 
} 
 
function fileDialogComplete(numFilesSelected, numFilesQueued) { 
  try { 
    if (numFilesQueued > 0) { 
      this.startUpload(); 
    } 
  } catch (ex) { 
    this.debug(ex); 
  } 
} 
 
function uploadProgress(file, bytesLoaded) { 
 
  try { 
    var percent = Math.ceil((bytesLoaded / file.size) * 100); 
 
    var progress = new FileProgress(file, this.customSettings.upload_target); 
    progress.setProgress(percent); 
    if (percent == 100) { 
      if(showThumbnail){ 
        progress.setStatus("正在创建缩略图..."); 
      } 
      progress.toggleCancel(false, this); 
      uploadNum++; 
      setUploadNumber(uploadNum); 
    } else { 
      progress.setStatus("正在上传中,已完成"+percent+"%"); 
      progress.toggleCancel(true, this); 
    } 
  } catch (ex) { 
    this.debug(ex); 
  } 
} 
 
//文件数据发送成功,不管是否成功保存;其serverData是否服务器端处理完以后的返回值 
//这里规定返回值必须为success才代表成功 
var serverErrorInfo=""; 
function uploadSuccess(file, serverData) { 
  try { 
    var sd=serverData.replace(/ /gi,'').replace(/ /gi,'').replace(/\r/gi,'').replace(/\n/gi,'').replace(/\t/gi,''); 
    if(showThumbnail){ 
      var filePath=".."; 
      if(savePath!=''){ 
        filePath=filePath+"/"+savePath; 
      } 
      filePath=filePath+'/'+file.name; 
      addImage(filePath); 
    } 
    var progress = new FileProgress(file, this.customSettings.upload_target); 
    if(showThumbnail){ 
      progress.setStatus("缩略图创建完成!"); 
    } 
    if(sd!=''){ 
      if(sd!='success'){ 
        if(serverErrorInfo!=''){ 
          serverErrorInfo+='<br />'; 
        } 
        serverErrorInfo+=sd; 
        document.getElementById('divError').innerHTML=serverErrorInfo; 
      } 
    } 
    progress.toggleCancel(false); 
 
 
  } catch (ex) { 
    this.debug(ex); 
  } 
} 
 
//服务器端返回非空值才认为上传成功,触发下面事件 
function uploadComplete(file) { 
  try { 
    /* I want the next upload to continue automatically so I'll call startUpload here */ 
    if (this.getStats().files_queued > 0) { 
      this.startUpload(); 
    } else { 
      var progress = new FileProgress(file, this.customSettings.upload_target); 
      progress.setComplete(); 
      if(!isCancel){ 
        progress.setStatus("文件上传成功!"); 
      }else{ 
        progress.setStatus("上传已取消!"); 
        isCancel=false; 
      } 
      progress.toggleCancel(false); 
    } 
  } catch (ex) { 
    this.debug(ex); 
  } 
} 
 
function uploadError(file, errorCode, message) { 
  var imageName = "error.gif"; 
  var progress; 
  try { 
    switch (errorCode) { 
    case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED: 
      try { 
        progress = new FileProgress(file, this.customSettings.upload_target); 
        progress.setCancelled(); 
        progress.setStatus("取消完成!"); 
        progress.toggleCancel(false); 
      } 
      catch (ex1) { 
        this.debug(ex1); 
      } 
      break; 
    case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED: 
      try { 
        progress = new FileProgress(file, this.customSettings.upload_target); 
        progress.setCancelled(); 
        progress.setStatus("已停止!"); 
        progress.toggleCancel(true); 
      } 
      catch (ex2) { 
        this.debug(ex2); 
      } 
    case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: 
      imageName = "uploadlimit.gif"; 
      break; 
    default: 
      alert(message); 
      break; 
    } 
 
    addImage("/modules/commons/view/multifileupload/images/" + imageName); 
 
  } catch (ex3) { 
    this.debug(ex3); 
  } 
 
} 
 
 
function addImage(src) { 
  var imageName=getFileName(src); 
  var divImage=document.createElement("span"); 
  divImage.style.margin = "5px"; 
  divImage.style.padding = "1px"; 
  divImage.style.width = "59px"; 
  divImage.style.height = "85px"; 
  divImage.style.display="block"; 
  divImage.style.border="10px"; 
  divImage.style.float="left"; 
  divImage.attachEvent("onmouseover", setBackground(divImage,"#FFFACD"));  
  divImage.attachEvent("onmouseout", setBackground(divImage,"#FFFFFF"));  
   
  var newImg = document.createElement("img"); 
  //newImg.style.margin = "5px"; 
  newImg.style.width = "59px"; 
  newImg.style.height = "59px"; 
  newImg.alt=imageName; 
   
  var divImageName=document.createElement("div"); 
  divImageName.style.marginTop="5px"; 
  divImageName.style.width="59px"; 
  divImageName.style.height="20px"; 
  divImageName.style.textAlign="center"; 
  divImageName.innerHTML=imageName; 
   
  divImage.appendChild(newImg); 
  divImage.appendChild(divImageName); 
  document.getElementById("thumbnails").appendChild(divImage); 
  if (newImg.filters) { 
    try { 
      newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0; 
    } catch (e) { 
      // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. 
      newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')'; 
    } 
  } else { 
    newImg.style.opacity = 0; 
  } 
 
  newImg.onload = function () { 
    fadeIn(newImg, 0); 
  }; 
  newImg.src = src; 
} 
 
function fadeIn(element, opacity) { 
  var reduceOpacityBy = 5; 
  var rate = 30; // 15 fps 
 
 
  if (opacity < 100) { 
    opacity += reduceOpacityBy; 
    if (opacity > 100) { 
      opacity = 100; 
    } 
 
    if (element.filters) { 
      try { 
        element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity; 
      } catch (e) { 
        // If it is not set initially, the browser will throw an error. This will set it if it is not set yet. 
        element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')'; 
      } 
    } else { 
      element.style.opacity = opacity / 100; 
    } 
  } 
 
  if (opacity < 100) { 
    setTimeout(function () { 
      fadeIn(element, opacity); 
    }, rate); 
  } 
} 
 
var isCancel=false;//是否取消上传 
var uploadNum=0;//已成功上传文件 
cancelUpload=function(){ 
  document.getElementById('imgCancelButton').style.visible='hidden'; 
  swfu.cancelUpload(); 
  /*var fileProgressID = "divFileProgress"; 
  var fileProgressWrapper = document.getElementById(fileProgressID); 
  var fileProgressElement = fileProgressWrapper.firstChild; 
  fileProgressElement.childNodes[2].innerHTML = '上传已停止!';*/ 
  isCancel=true; 
} 
setUploadNumber=function(num){ 
  document.getElementById("lgdUploadNumber").innerHTML="文件上传(已上传<span id='spNumber'>"+num+"</span>个文件)"; 
} 
getFileName=function(filePath){ 
  var i=0; 
  if(filePath.indexOf('/')==-1){ 
    i=filePath.lastIndexOf('\\'); 
  }else{ 
    i=filePath.lastIndexOf('/'); 
  } 
  var j=filePath.lastIndexOf('.'); 
  var fileName=filePath.substring(i+1,j); 
  return fileName; 
} 
setBackground=function(obj,color){ 
  return function(){ 
    setBackgroundWithParams(obj,color); 
  } 
} 
setBackgroundWithParams=function(obj,color){ 
  obj.style.backgroundColor=color; 
  obj.style.border="1px"; 
  obj.style.borderColor="red"; 
   
} 
/* ****************************************** 
 * FileProgress Object 
 * Control object for displaying file info 
 * ****************************************** */ 
function FileProgress(file, targetID) { 
  this.fileProgressID = "divFileProgress"; 
 
  this.fileProgressWrapper = document.getElementById(this.fileProgressID); 
  if (!this.fileProgressWrapper) { 
    this.fileProgressWrapper = document.createElement("div"); 
    this.fileProgressWrapper.className = "progressWrapper"; 
    this.fileProgressWrapper.id = this.fileProgressID; 
 
    this.fileProgressElement = document.createElement("div"); 
    this.fileProgressElement.className = "progressContainer"; 
 
    var progressCancel = document.createElement("a"); 
    progressCancel.className = "progressCancel"; 
    progressCancel.href = "#"; 
    progressCancel.id = "imgCancelButton"; 
    progressCancel.attachEvent("onclick", cancelUpload);  
    progressCancel.style.visibility = "hidden"; 
    progressCancel.appendChild(document.createTextNode(" ")); 
 
    var progressText = document.createElement("div"); 
    progressText.className = "progressName"; 
    progressText.appendChild(document.createTextNode(file.name)); 
 
    var progressBar = document.createElement("div"); 
    progressBar.className = "progressBarInProgress"; 
 
    var progressStatus = document.createElement("div"); 
    progressStatus.className = "progressBarStatus"; 
    progressStatus.innerHTML = " "; 
 
    this.fileProgressElement.appendChild(progressCancel); 
    this.fileProgressElement.appendChild(progressText); 
    this.fileProgressElement.appendChild(progressStatus); 
    this.fileProgressElement.appendChild(progressBar); 
 
    this.fileProgressWrapper.appendChild(this.fileProgressElement); 
 
    document.getElementById(targetID).appendChild(this.fileProgressWrapper); 
    fadeIn(this.fileProgressWrapper, 0); 
 
  } else { 
    this.fileProgressElement = this.fileProgressWrapper.firstChild; 
    this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name; 
  } 
 
  this.height = this.fileProgressWrapper.offsetHeight; 
 
} 
FileProgress.prototype.setProgress = function (percentage) { 
  this.fileProgressElement.className = "progressContainer green"; 
  this.fileProgressElement.childNodes[3].className = "progressBarInProgress"; 
  this.fileProgressElement.childNodes[3].style.width = percentage + "%"; 
}; 
FileProgress.prototype.setComplete = function () { 
  this.fileProgressElement.className = "progressContainer blue"; 
  this.fileProgressElement.childNodes[3].className = "progressBarComplete"; 
  this.fileProgressElement.childNodes[3].style.width = ""; 
 
}; 
FileProgress.prototype.setError = function () { 
  this.fileProgressElement.className = "progressContainer red"; 
  this.fileProgressElement.childNodes[3].className = "progressBarError"; 
  this.fileProgressElement.childNodes[3].style.width = ""; 
 
}; 
FileProgress.prototype.setCancelled = function () { 
  this.fileProgressElement.className = "progressContainer"; 
  this.fileProgressElement.childNodes[3].className = "progressBarError"; 
  this.fileProgressElement.childNodes[3].style.width = ""; 
 
}; 
FileProgress.prototype.setStatus = function (status) { 
  this.fileProgressElement.childNodes[2].innerHTML = status; 
}; 
 
FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) { 
  this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden"; 
  if (swfuploadInstance) { 
    var fileID = this.fileProgressID; 
    this.fileProgressElement.childNodes[0].onclick = function () { 
      swfuploadInstance.cancelUpload(fileID); 
      return false; 
    }; 
  } 
};

MultiFileUpload.js

var uploadUrl='$!{request.uploadUrl}';//上传处理的url 
var savePath='$!{request.savePath}'; 
var fileType='$!{request.fileType}'; 
//var postName='$request.postName'; 
var sizeLimit='$!{request.sizeLimit}'; 
var uploadLimit='$!{request.uploadLimit}'; 
//var buttonWidth='$!{request.buttonWidth}'; 
//var buttonHeight='$!{request.buttonHeight}'; 
var buttonText='$!{request.buttonText}'; 
var buttonAlign='$!{request.buttonAlign}'; 
var componentHeight='$!{request.componentHeight}'; 
var showThumbnail='$!{request.showThumbnail}'; //是否显示缩略图,一般用于图片上传,默认为false 
var thumbnailScroll='$!{request.thumbnailScroll}';//缩略图部分是否显示滚动条 
if(uploadUrl==''){ 
  //uploadUrl='/Commons/fileUpload.do'; 
  uploadUrl='/commons/paste.do?template=/multifileupload/data/upload.htm'; 
} 
//if(postName=''){ 
//  postName= "Filedata"; 
//} 
if(fileType==''){ 
  fileType='*.*'; 
} 
if(uploadLimit==''){ 
  uploadLimit=0; 
} 
//if(buttonWidth==''){ 
//  buttonWidth=100; 
//} 
//if(buttonHeight==''){ 
//  buttonHeight=22; 
//} 
if(buttonText==''){ 
  buttonText='选 择 文 件'; 
} 
if(buttonAlign==''){ 
  buttonAlign='left'; 
} 
if(showThumbnail==''){ 
  showThumbnail=false; 
}else{ 
  showThumbnail=true; 
} 
if(thumbnailScroll==''){ 
  thumbnailScroll=false; 
}else{ 
  thumbnailScroll=true; 
} 
 
if(uploadUrl.indexOf('?')!=-1){ 
  uploadUrl=uploadUrl+'&savePath='+encodeURIComponent(savePath); 
}else{ 
  uploadUrl=uploadUrl+'?savePath='+encodeURIComponent(savePath); 
} 
 
var swfu; 
window.onload = function () { 
  swfu = new SWFUpload({ 
    upload_url: uploadUrl, 
    file_size_limit : sizeLimit, 
    file_types : fileType, 
    //file_types_description : "JPG Images", 
    file_upload_limit : uploadLimit,  // Zero means unlimited 
 
    file_queue_error_handler : fileQueueError, 
    file_dialog_complete_handler : fileDialogComplete, 
    upload_progress_handler : uploadProgress, 
    upload_error_handler : uploadError, 
    upload_success_handler : uploadSuccess, 
    upload_complete_handler : uploadComplete, 
 
    button_image_url : "/modules/commons/view/multifileupload/images/XPButtonNoText_160x22.png", 
    button_placeholder_id : "spanButtonPlaceholder", 
    button_width: 101, 
    button_height: 22, 
    button_text : buttonText, 
    button_text_style : '.button { font-family: 华文行楷,宋体, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 
    button_text_top_padding: 1, 
    button_text_left_padding: 20, 
 
    flash_url : "/modules/commons/js/swfupload/swfupload.swf", 
 
    custom_settings : { 
      upload_target : "divFileProgressContainer" 
    }, 
 
    debug: false 
  }); 
   
  if(thumbnailScroll){ 
    var divThumbnails=document.getElementById("thumbnails"); 
    var divContent=document.getElementById("content"); 
    divContent.style.width="400px"; 
    divThumbnails.style.height='200px'; 
    divThumbnails.style.overflowY="scroll"; 
    divThumbnails.style.border="solid 1px #DDF0DD"; 
  } 
  document.getElementById("divButtonPlaceholder").style.textAlign=buttonAlign; 
  if(componentHeight!=''){ 
    componentHeight=componentHeight.replace("px",""); 
    componentHeight=Number(componentHeight)-25;//去掉空隙和按钮高度 
    document.getElementById("fsProgress").style.height=componentHeight+"px"; 
  } 
}

其中MultiFileHandler.js是对于上传过程中各个事件的处理,MultiFileUpload.js是SWFUpload的使用,"$"符号开头的变量在实际使用过程中可以自由定制,另外在此还要提醒大家,。代码中的savePath变量是文件最后的保存路径,后台只要读取此变量保存到相应的位置即可。下面是后台代码:

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
 
namespace WebApplication1 
{ 
  public partial class FileUpload : System.Web.UI.Page 
  { 
    protected void Page_Load(object sender, EventArgs e) 
    { 
      string path=""; 
      HttpPostedFile file= Request.Files["FileData"]; 
      string relationPath=Request["savePath"]; 
      if(relationPath!=string.Empty) 
      { 
        path=Server.MapPath("~/")+relationPath+"\\"+file.FileName; 
      } 
      file.SaveAs(path); 
      Response.Write("success"); 
    } 
  } 
}

需要注意的是在后台一定要给出返回值(例如上面代码中Response.Write("success"))否则SWFUpload就不认为是上传完成。

下面的实际效果:
Javascript使用SWFUpload进行多文件上传Javascript使用SWFUpload进行多文件上传Javascript使用SWFUpload进行多文件上传

原文链接:http://blog.csdn.net/jianxin160/article/details/7029207

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 #Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 #Javascript
微信小程序 地图(map)实例详解
Nov 16 #Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 #Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 #Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 #Javascript
You might like
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
新闻内页-JS分页
2006/06/07 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python Cookie 读取和保存方法
2018/12/28 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
学习Python爬虫的几点建议
2020/08/05 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
《中国的气候》教学反思
2014/02/23 职场文书
高中家长寄语
2014/04/02 职场文书
法律专业自荐信
2014/06/03 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
酒店前台辞职书
2015/02/26 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers