首页
所有分类
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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
微信小程序 地图（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
SSL(3) 443(1) 二级域名(1) Centos(8) lnmp(1) 压力测试(1) 跨域(4) lamp(1) 前后端分离(1) URL重定向(3)
You might like
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
JavaScript 学习笔记（九）call和apply方法
2010/01/11 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
python 数据的清理行为实例详解
2017/07/12 Python
python正则表达式面试题解答
2020/04/28 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
python算的上脚本语言吗
2020/06/22 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python中pickle模块浅析
2020/12/29 Python
名人珠宝设计师：Melinda Maria Jewelry
2019/03/06 全球购物
请写出 BOOL flag 与＂零值＂比较的 if 语句
2016/02/29 面试题
新郎父亲婚宴答谢词
2014/01/11 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
维稳承诺书
2015/01/20 职场文书
社区党务工作总结2015
2015/05/19 职场文书
离婚案件原告代理词
2015/05/23 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL