首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript使用uploadify来实现多文件上传

Posted in Javascript onNovember 16, 2016

使用uploadify来实现文件上传能够客户端判断文件大小、控制文件上传的类型、实现多文件上传、显示进度条等功能，方便易用，兼容性较好。
Javascript使用uploadify来实现多文件上传

本例是把dwz中整合uploadify功能抽取出来的，可以进行单独使用，不一定要遭dwz中才能使用，本例只是为了测试，所以使用静态页面进行测试：

话不多说，代码敬上：
Javascript使用uploadify来实现多文件上传
2，html页面的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>MyHtml.html</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<link href="resources/dwz/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="resources/dwz/js/jquery-1.7.2.js" type="text/javascript"></script> 
<script src="resources/dwz/uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script> 
 <script src="resources/dwz/uploadify/scripts/errorCode.js" type="text/javascript"></script> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<style type="text/css" media="screen"> 
.my-uploadify-button { 
  background: none; 
  border: none; 
  text-shadow: none; 
  border-radius: 0; 
} 
 
.uploadify:hover .my-uploadify-button { 
  background: none; 
  border: none; 
} 
 
.fileQueue { 
  width: 400px; 
  height: 150px; 
  overflow: auto; 
  border: 1px solid #E5E5E5; 
  margin-bottom: 10px; 
} 
</style> 
<script type="text/javascript"> 
  $(function(){ 
    $('#testFileInput').uploadify({ 
      swf:'resources/dwz/uploadify/scripts/uploadify.swf', 
      uploader:'servlet/uploadify.do',//上传的url 
      formData:{PHPSESSID:'xxx', ajax:1}, 
      buttonText:'请选择文件', 
      fileSizeLimit:'200KB',//设置上传大小 
      fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;', 
      fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',//允许的后缀 
      auto:true,//是否自动上传 
      multi:true, 
      overrideEvents: ['onDialogClose', 'onUploadError', 'onSelectError' ],//重新错误信息的显示方法 
      onSelectError: uploadify_onSelectError, 
      onUploadError: uploadify_onUploadError, 
      onUploadSuccess: uploadify_onUploadSuccess 
    }); 
   
  $('#testFileInput2').uploadify({ 
      swf:'resources/dwz/uploadify/scripts/uploadify.swf', 
      uploader:'servlet/uploadify.do', 
      formData:{PHPSESSID:'xxx', ajax:1}, 
      queueID:'fileQueue', 
      buttonImage:'resources/dwz/uploadify/img/add.jpg', 
      buttonClass:'my-uploadify-button', 
      width:102, 
      auto:false, 
      fileSizeLimit:'100KB',    
      fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;',  
      fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',  
      overrideEvents: [ 'onDialogClose','onUploadError', 'onSelectError' ], 
      onSelectError: uploadify_onSelectError, 
      onUploadError: uploadify_onUploadError, 
      onUploadSuccess: uploadify_onUploadSuccess 
    }); 
  }); 
 
</script> 
</head> 
 
<body> 
    <!-- 单文件上传 --> 
    <input id="testFileInput" type="file" name="image" /> 
    <div class="divider"></div> 
    <!-- 多文件上传 --> 
    <input id="testFileInput2" type="file" name="image2" /> 
    <div id="fileQueue" class="fileQueue"></div> 
    <input type="image" src="resources/dwz/uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');" /> 
    <input type="image" src="resources/dwz/uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');" /> 
</body> 
</html>

3，上传的servlet代码

package uploadFile; 
 
import java.io.File; 
import java.io.IOException; 
import java.util.Iterator; 
import java.util.List; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
import org.apache.commons.fileupload.FileItem; 
import org.apache.commons.fileupload.FileUploadException; 
import org.apache.commons.fileupload.disk.DiskFileItemFactory; 
import org.apache.commons.fileupload.servlet.ServletFileUpload; 
 
public class UploadFile extends HttpServlet { 
 
  @Override 
  protected void service(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    super.service(request, response); 
  } 
   
   
  @Override 
  protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException { 
    //临时目录 
    String basePath = req.getServletContext().getRealPath("upload"); 
    String tempDir = "temp"; 
     
    File tempFile = new File(basePath + File.separator +tempDir); 
    if (!tempFile.exists()) { 
      tempFile.mkdir(); 
    } 
     
    DiskFileItemFactory dfc = new DiskFileItemFactory(); 
    dfc.setSizeThreshold(1*1024*1024);//设置临界值 
    dfc.setRepository(tempFile);//设置临时上传目录 
     
    ServletFileUpload upload = new ServletFileUpload(dfc); 
    upload.setHeaderEncoding("UTF-8");//设置编码 
    // 设置文件最大值,这里设置5Mb,5*1024*1024; 
    upload.setSizeMax(5 * 1024 * 1024); 
     
    try { 
      List fileList = upload.parseRequest(req); 
      Iterator<FileItem> iterator = fileList.iterator(); 
      while (iterator.hasNext()) { 
        FileItem item = iterator.next(); 
        String fileName = item.getName();//得到文件名 
        if (fileName != null) { 
        //System.out.println(fileName); 
        //System.out.println(item.getSize()); 
        File sourceFile = new File(basePath+File.separator+fileName); 
        item.write(sourceFile); 
        } 
      } 
    } catch (FileUploadException e) { 
      e.printStackTrace(); 
    } catch (Exception e) { 
      e.printStackTrace(); 
    } 
     
    //resp.getWriter().print("上传成功！");  
  } 
   
   
  @Override 
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
      throws ServletException, IOException { 
    super.doPost(req, resp); 
  } 
}

4，web.xml配置

<servlet> 
 <servlet-name>upLoadify</servlet-name> 
 <servlet-class>uploadFile.UploadFile</servlet-class> 
</servlet> 
<servlet-mapping> 
 <servlet-name>upLoadify</servlet-name> 
 <url-pattern>/servlet/uploadify.do</url-pattern> 
</servlet-mapping>

5，uploadify的提示信息是英文的，为了显示中文的提示信息，将其错误提示方法进行重新，新建errorCode.js放入在resource/dwz/uploadify/scripts文件夹下面，并在页面进行导入这个js,js代码如下：

var uploadify_onSelectError = function(file, errorCode, errorMsg) { 
    var msgText = "上传失败\n"; 
    switch (errorCode) { 
      case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED: 
        //this.queueData.errorMsg = "每次最多上传 " + this.settings.queueSizeLimit + "个文件"; 
        msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件"; 
        break; 
      case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT: 
        msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )"; 
        break; 
      case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE: 
        msgText += "文件大小为0"; 
        break; 
      case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE: 
        msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts; 
        break; 
      default: 
        msgText += "错误代码：" + errorCode + "\n" + errorMsg; 
    } 
    alert(msgText); 
  }; 
  
var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) { 
    // 手工取消不弹出提示 
    if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED 
        || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) { 
      return; 
    } 
    var msgText = "上传失败\n"; 
    switch (errorCode) { 
      case SWFUpload.UPLOAD_ERROR.HTTP_ERROR: 
        msgText += "HTTP 错误\n" + errorMsg; 
        break; 
      case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL: 
        msgText += "上传文件丢失，请重新上传"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.IO_ERROR: 
        msgText += "IO错误"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR: 
        msgText += "安全性错误\n" + errorMsg; 
        break; 
      case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: 
        msgText += "每次最多上传 " + this.settings.uploadLimit + "个"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED: 
        msgText += errorMsg; 
        break; 
      case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: 
        msgText += "找不到指定文件，请重新操作"; 
        break; 
      case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: 
        msgText += "参数错误"; 
        break; 
      default: 
        msgText += "文件:" + file.name + "\n错误码:" + errorCode + "\n" 
            + errorMsg + "\n" + errorString; 
    } 
    alert(msgText); 
  } 
  // return parameters; 
//} 
  
  
var uploadify_onUploadSuccess = function(file, data, response) { 
  alert(file.name + "\n\n上传成功"); 
};

收工！

原文链接：http://blog.csdn.net/hwt_211/article/details/36888763

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

Javascript使用uploadify来实现多文件上传

- Author -

hwt_211

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
11个教程中不常被提及的JavaScript小技巧（推荐）
Apr 17 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
微信小程序 地图（map）实例详解
Nov 16 #Javascript
微信小程序 选择器（时间，日期，地区）实例详解
Nov 16 #Javascript
微信小程序 图片等比例缩放（图片自适应屏幕）
Nov 16 #Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 #Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
JavaScript仿微博发布信息案例
Nov 16 #Javascript
procedure(1) 短信验证码(1) commit(1) 内置函数(1) harbor(1) SQLite3(1) pytz(1) 分布式锁(3) Tablespace(1) GoFrame(3)
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Python urlopen()函数 示例分享
2014/06/12 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
linux环境下Django的安装配置详解
2019/07/22 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python实发邮件实例详解
2019/11/11 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
工程力学专业毕业生求职信
2013/10/06 职场文书
教师对学生的寄语
2014/04/03 职场文书
部门年终奖分配方案
2014/05/07 职场文书
后备干部培训方案
2014/05/22 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
Win11快速关闭所有广告推荐
2022/04/19 数码科技