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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
基于iview的router常用控制方式
May 30 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
ftp类(example.php)
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
PHP print类函数使用总结
2010/06/25 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
在PHP中使用redis
2013/11/04 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
laravel自定义分页效果
2017/07/23 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
实例浅析js的this
2016/12/11 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
大学生找工作推荐信范文
2013/11/28 职场文书
2014新年寄语
2014/01/20 职场文书
中英文求职信范文
2014/01/27 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
二手房购房意向书范本
2014/04/01 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书