首页
所有分类
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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
浅谈React Event实现原理
Sep 20 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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
TableField(1) 子查询(1) el-table(1) 脚手架(2) Mybatis-Plus(3) Windows server 2012(17) 日志格式分析(1) nginx(76) create(1) mounted(1)
You might like
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
详解Python中的type和object
2018/08/15 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python正则表达式学习小例子
2020/03/03 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
python drf各类组件的用法和作用
2021/01/12 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
美国彩妆品牌：Coastal Scents
2017/04/01 全球购物
Wolford法国官网：奥地利奢侈内衣品牌
2020/08/11 全球购物
大学生会计职业生涯规划范文
2014/02/28 职场文书
大学生励志演讲稿
2014/04/25 职场文书
信仰心得体会
2014/09/05 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
第一节英语课开场白
2015/06/01 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
2019暑假学生安全口号
2019/06/27 职场文书