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

使用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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索uploadify文件上传
uploadifyh上传文件
uploadify多文件上传、uploadify取消上传、uploadify跨域上传、uploadify 上传图片、uploadify大文件上传，以便于您获取更多的相关知识。

时间： 2024-03-05 02:53:32

Javascript使用uploadify来实现多文件上传_javascript技巧的相关文章

javascript html5移动端轻松实现文件上传_javascript技巧

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">

Javascript使用SWFUpload进行多文件上传_javascript技巧

SWFUpload可以说是目前最好的多文件上传工具之一,虽然它是基于flash插件开发的,但是相比目前很多js多文件上传还是具有很多优点: 可以同时选择多个文件上传(注意是以此选择文件) 无刷新上传 可以显示进度条 良好的浏览器兼容性 兼容其他js类库 SWFUpload另个优点就是它优秀的设计,它提供了一组简明的JavaScript事件,借助它们开发者可以方便的在文件上传过程中更新页面的内容. 下面是SWFUpload在具体使用过程中js代码 MultiFileHandler.js funct

原生JavaScript实现异步多文件上传_javascript技巧

这是在上篇的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的JavaScript 代码,所以我们主要看JS代码. 先介绍一下技术参数: 页面技术:HTML5 后台技术:Servlet 3.0 服务器:Tomcat 7.0 脚本:JavaScript HTML5 file组件的新属性 accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了,实在是很方便. multiple:是否允许选择多个文件HTML5 页面代码修改后 <img width

基于javascript html5实现多文件上传_javascript技巧

本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得

artDialog+plupload实现多文件上传_javascript技巧

Plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. 一.效果展示 包括文件上传面板以及文件上传列表 二.介绍 长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式. 其中涉及的分页我会另开一片博客介绍. 三.准备材料 pluploa

使用Web Uploader实现多文件上传_javascript技巧

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF. <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webu

使用plupload自定义参数实现多文件上传_javascript技巧

1.在开发中可能需要用户附件上传的功能,实现批量上传功能其实就将多个上传任务放到一个集合中,分别上传. 2,使用plupload js插件可以很轻松的实现带参数的多文件上传 3.具体js实现方式 <script type="text/javascript"> var map={};//文件id为key,文件类型为value的集合 // Custom example logic var uploader = new plupload.Uploader({ runtimes :

uploadify java实现多文件上传和预览_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> &

基于uploadify.js实现多文件上传和上传进度条的显示

uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify.com/,进入官网首页(不截图了,其实也没啥看的),可以看到uploadify的标语"Upload files like magic",意思是说使用uploadify上传文件如魔法一般.目前一共分为两个版本,Flash版和HTML5版,不过HTML5版是收费的,如图: 这里我们下载Flas