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

2024-12-09 06:36:57

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

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

话不多说，代码敬上：

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

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

详解jQuery uploadify文件上传插件的使用方法

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例实例中用到的php文件UploaderDemo.php请在页面下方下载引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript
jQuery.uploadify文件上传组件实例讲解

1.jquery.uploadify简介在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/
uploadify java实现多文件上传和预览

本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html <!DOCTYPE html> <html lang="en"> <head> <@head/> <script src="<@path/>/js/uploadify-v3.1/jquery.uploadify-3.1.js"></script> &
jQuery文件上传插件Uploadify使用指南

对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法:1.加载JS和CSS 复制代码代码如下: <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script&
uploadify多文件上传参数设置技巧

比起swfupload,uploadify插件配置使用都更简单,只是刚加载的时候稍微慢了一秒左右. 废话不多说了,直接给大家贴代码了. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8″ /> <title>php jquery
ASP.NET文件上传控件Uploadify的使用方法

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl
JavaScript Uploadify文件上传实例

前言 java+javascript,没用上数据库,做了一个简简单单的jsp上传小功能,就是记录一下,对于这个小项目有什么建议,欢迎指出不足之处 (-_+) PS:从我的包名看得出,我用过很多前辈们的代码,基本上都是东凑西拼,各个部分代码的出处就不一一列出了,能看就行! 运行环境: Java EE + Tomcat 7.0 项目结构 ( Dynamic Web Project ) src各部分代码 1. com.bijian.study.Upload.java package com.bijia
ASP.NET多文件上传控件Uploadify的使用方法

对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Uploadify是通过轮训的方式去调用我们的后台upload程序的,所以,对于多文件上传来说,也没什么稀奇的. 下面是文件上传后的缩略图如下列表的组装使用JS模板,这样对于复杂的HTML结构来说,可以减少拼写错误的出现,关闭是将LI元素从UI元素移除,最后提交时,从UI里检查LI元素,然后对它进行组装,并进
php+jQuery.uploadify实现文件上传教程

这两天用上传的控件,PHP+Jquery今天先介绍这个uploadify,嗯,我今天下载因为我英文不是很好所以我就在网上找的使用教程,我发现好多用不了,我那个去,你看官方文档才知道很多API已经不是以前的API了.今天总结一下给大家,给大家一个提醒最多还是要看官方的http://www.uploadify.com/documentation/! 简单举例一下使用然后我都加上注释给大家,方便大家阅读和使用下载官方的之后直接使用就OK了,当然你需要什么在直接修改就可以了! 复制代码代码如下: <!
jQuery文件上传控件 Uploadify 详解

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

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

相关推荐

随机推荐