基于WebUploader的文件上传js插件

前端技术 2023/09/04 JavaScript

首先把地址甩出来，http://fex-team.github.io/webuploader/ 

里面有比较完整的demo案例文档，本文主要是基于文件上传和图片上传增加了大量的注释，基本保证了每行代码都有注释以助于理解，是对官网demo的增强版，希望可以帮助大家更好的理解该插件

首先是文件上传

jQuery(function() {
  var $ = jQuery,
    $list = $(\'#thelist\'),
    $btn = $(\'#ctlBtn\'),
    state = \'pending\',
    uploader;

 //初始化，实际上可直接访问Webuploader.upLoader
  uploader = WebUploader.create({

    // 不压缩image
    resize: false,

    // swf文件路径
    swf: BASE_URL + \'/js/Uploader.swf\',

    // 发送给后台代码进行处理，保存到服务器上
    server: \'http://webuploader.duapp.com/server/fileupload.php\',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: \'#picker\'
  });

  // uploader添加事件，当文件被加入队列后触发
  uploader.on( \'fileQueued\', function( file ) {
 //在加入队列时，创建一个样式，供后面上传成功失败等等调用，定义一个*p表示指向该事件样式
    $list.append( \'<div id=\"\' + file.id + \'\" class=\"item\">\' +
      \'<h4 class=\"info\">\' + file.name + \'</h4>\' +
      \'<p class=\"state\">等待上传...</p>\' +
    \'</div>\' );
  });

  // 文件上传过程中触发，携带上传进度，file表示上传的文件，percentage表示上传的进度
  uploader.on( \'uploadProgress\', function( file, percentage ) {
 //定义一个变量名创建进度模块
    var $li = $( \'#\'+file.id ),
  //找到$li下class为progress的，并定义为$percent------为什么先寻找在创建
      $percent = $li.find(\'.progress .progress-bar\');

    //如果$percent没值，就创建进度条加入到对应的文件名下， 避免重复创建
    if ( !$percent.length ) {
      $percent = $(\'<div class=\"progress progress-striped active\">\' +
       \'<div class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%\">\' +
       \'</div>\' +
      \'</div>\').appendTo( $li ).find(\'.progress-bar\');
    }
 
 //为进度模块添加弹出文本
    $li.find(\'p.state\').text(\'上传中\');
 
 //为进度模块创建读条的百分比
    $percent.css( \'width\', percentage * 100 + \'%\' );
  });

 //uploader触发事件，当上传成功事调用这个事件
  uploader.on( \'uploadSuccess\', function( file ) {
 //调用文件被加入时触发的事件，findstate，并添加文本为已上传
    $( \'#\'+file.id ).find(\'p.state\').text(\'已上传\');
  });

 //uploader触发事件，当上传失败时触发该事件
  uploader.on( \'uploadError\', function( file ) {
 //调用文件被加入时触发的事件，findstate，并添加文本为上传出错
    $( \'#\'+file.id ).find(\'p.state\').text(\'上传出错\');
  });
 
 //该事件表示不管上传成功还是失败都会触发该事件
  uploader.on( \'uploadComplete\', function( file ) {
 //调用
    $( \'#\'+file.id ).find(\'.progress\').fadeOut();
  });

 //这是一个特殊事件，所有的触发都会响应到，type的作用是记录当前是什么事件在触发，并给state赋值
  uploader.on( \'all\', function( type ) {
    if ( type === \'startUpload\' ) {
      state = \'uploading\';
    } else if ( type === \'stopUpload\' ) {
      state = \'paused\';
    } else if ( type === \'uploadFinished\' ) {
      state = \'done\';
    }
 
 //根据state判断弹出文本
    if ( state === \'uploading\' ) {
      $btn.text(\'暂停上传\');
    } else {
      $btn.text(\'开始上传\');
    }
  });
 
 //当按钮被点击时触发，根据状态开始上传或是暂停
  $btn.on( \'click\', function() {
    if ( state === \'uploading\' ) {
      uploader.stop();
    } else {
      uploader.upload();
    }
  });
});

 然后是图片上传

jQuery(function() {

 //将jquery赋值给一个全局的变量
  var $ = jQuery,

    $list = $(\'#fileList\'),
    // 优化retina, 在retina下这个值是2，设备像素比
    ratio = window.devicePixelRatio || 1,

    // 缩略图大小
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,

    // Web Uploader实例
    uploader;

  // 初始化Web Uploader
  uploader = WebUploader.create({

    // 自动上传。
    auto: true,

    // swf文件路径
    swf: BASE_URL + \'/js/Uploader.swf\',

    // 文件接收服务端。调用代码，把图片保存在服务器端
    server: \'http://webuploader.duapp.com/server/fileupload.php\',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: \'#filePicker\',

    // 只允许选择文件，可选。
    accept: {
      title: \'Images\',
      extensions: \'gif,jpg,jpeg,bmp,png\',
      mimeTypes: \'image/*\'
    }
  });

  // 当有文件添加进来的时候触发这个事件
  uploader.on( \'fileQueued\', function( file ) {
 //定义变量li
    var $li = $(
  //创建一个id
        \'<div id=\"\' + file.id + \'\" class=\"file-item thumbnail\">\' +
          \'<img>\' +
   //创建一个为info的class
          \'<div class=\"info\">\' + file.name + \'</div>\' +
        \'</div>\'
        ),
      $img = $li.find(\'img\');
 
 //把定义的li加入到list中
    $list.append( $li );

    // 创建缩略图，此过程为异步，需要传入callBack（function( error, src ))，通常在图片加入队列后调用此方法，以增强交互性
 //callback有两个参数，当失败时调用error，src存放的是缩略图的地址
    uploader.makeThumb( file, function( error, src ) {
      if ( error ) {
        $img.replaceWith(\'<span>不能预览</span>\');
        return;
      }

      $img.attr( \'src\', src );
    }, thumbnailWidth, thumbnailHeight );
  });

  // 文件上传过程中创建进度条实时显示。
  uploader.on( \'uploadProgress\', function( file, percentage ) {
    var $li = $( \'#\'+file.id ),
      $percent = $li.find(\'.progress span\');

    // 避免重复创建
    if ( !$percent.length ) {
      $percent = $(\'<p class=\"progress\"><span></span></p>\')
          .appendTo( $li )
          .find(\'span\');
    }

    $percent.css( \'width\', percentage * 100 + \'%\' );
  });

  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  uploader.on( \'uploadSuccess\', function( file ) {
    $( \'#\'+file.id ).addClass(\'upload-state-done\');
  });

  // 文件上传失败，现实上传出错。
  uploader.on( \'uploadError\', function( file ) {
    var $li = $( \'#\'+file.id ),
      $error = $li.find(\'div.error\');

    // 避免重复创建
    if ( !$error.length ) {
      $error = $(\'<div class=\"error\"></div>\').appendTo( $li );
    }

    $error.text(\'上传失败\');
  });

  // 完成上传完了，成功或者失败，先删除进度条。
  uploader.on( \'uploadComplete\', function( file ) {
    $( \'#\'+file.id ).find(\'.progress\').remove();
  });
});

 下面是java的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器 

1.首先我们应该为上传的文件建一个存放的位置，一般位置分为临时和真是文件夹，那我们就需要获取这俩个文件夹的绝对路径，在servlet中我们可以这样做 

 ServletContext application = this.getServletContext();
 String tempDirectory = application.getRealPath(Constant.TEMP_DIRECTORY) + \"/\";
 String realDirectory = application.getRealPath(Constant.REAL_DIRECTORY) + \"/\";

 然后建立文件工厂即仓库一个参数表示存放多大后flush，

  

复制代码 代码如下:
FileItemFactory factory = new DiskFileItemFactory(Constant.SIZE_THRESHOLD,new File(tempDirectory));
  ServletFileUpload upload = new ServletFileUpload(factory);

2.对上传的文件进行设定

  upload.setSizeMax(500*1024*1024);//设置该次上传最大值为500M3,.解析请求正文，获取上传文件，不抛出异常则写入真是路径

List<FileItem> list = upload.parseRequest(request);
  Iterator<FileItem> iter = list.iterator();
  while (iter.hasNext()) {
  FileItem item = iter.next();
  //item.isFormField()用来判断当前对象是否是file表单域的数据 如果返回值是true说明不是 就是普通表单域
  if(item.isFormField()){
   System.out.println( \"普通表单域\" +item.getFieldName());
   System.out.println(item.getString(\"utf-8\"));

  }else{
   //System.out.println(\"file表单域\" + item.getFieldName());
   /*
   * 只有file表单域才将该对象中的内容写到真实文件夹中 
   */
   String lastpath = item.getName();//获取上传文件的名称
   lastpath = lastpath.substring(lastpath.lastIndexOf(\".\"));
   String filename = UUID.randomUUID().toString().replace(\"-\", \"\") + lastpath;
   item.write(new File(realDirectory+filename));


package com.lanyou.support.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.struts2.ServletActionContext;

public class FileUpload extends HttpServlet {

 private static final long serialVersionUID = 1L;
 private static Log logger = LogFactory.getLog(FileUpload.class);

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
 doPost(req, resp);
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
 // 类型 1事件上传文件 2apk
 String t = req.getParameter(\"t\") == null ? \"1\" : req.getParameter(\"t\")
 .trim();
 String path = \"\";
 JSONObject ob = new JSONObject();
 try {
 
 //将请求消息中的每一个项目封装成单独DiskFileItem对象的任务
 //当上传的文件项目比较小时保存在内存中，比较大时保存在磁盘零时文件夹中
 //建立文件仓库(工厂)
 FileItemFactory factory = new DiskFileItemFactory();
 ServletFileUpload servletFileUpload = new ServletFileUpload(factory);
 //对上传的文件进行设定
 servletFileUpload.setSizeMax(1024 * 1024 * 2);// 最大2M数据
 servletFileUpload.setFileSizeMax(2 * 1024 * 1024);

 servletFileUpload.setHeaderEncoding(\"UTF-8\");// 解决文件名乱码的问题
 
 //解析请求正文，获取上传文件，不抛出异常则写入真实路径
 //根据请求获取文件列表
 List<FileItem> fileItemsList = servletFileUpload.parseRequest(req);
 //从文件列表中取出单独的文件对象
 for (FileItem item : fileItemsList) {
 //判断该文件是否是普通的表单类型，该处是file类型进入判断
 if (!item.isFormField()) {
  //如果上传的文件大于指定的大小则return
  if (item.getSize() > 2 * 1024 * 1024) {
  return;
  }

  // System.out.println(\"上传文件的大小：\"+item.getSize());
  // System.out.println(\"上传文件的类型：\"+item.getContentType());
  // System.out.println(\"上传文件的名称：\"+item.getName());
  
  
  //上传文件的名称
  String fileName = item.getName();

  String ent = \"\";
  //内容的类型
  if (item.getContentType().equalsIgnoreCase(\"image/x-png\")
  || item.getContentType().equalsIgnoreCase(
   \"image/png\")) {
  ent = \".png\";
  } else if (item.getContentType().equalsIgnoreCase(
  \"image/gif\")) {
  ent = \".gif\";
  } else if (item.getContentType().equalsIgnoreCase(
  \"image/bmp\")) {
  ent = \".bmp\";
  } else if (item.getContentType().equalsIgnoreCase(
  \"image/pjpeg\")
  || item.getContentType().equalsIgnoreCase(
   \"image/jpeg\")) {
  ent = \".jpg\";
  }
  
  //获取文件的是那种格式
  if (fileName.lastIndexOf(\".\") != -1) {
  ent = fileName.substring(fileName.lastIndexOf(\".\"));
  }
  fileName = \"ev_\" + System.currentTimeMillis() + ent;
  // 定义文件路径，根据你的文件夹结构，可能需要做修改
  if (t.equals(\"1\")) {
  path = \"upload/ev/\" + fileName;
  } else {
  path = \"upload/pk/\" + fileName;
  }

  // 保存文件到服务器上
  File file = new File(req.getSession().getServletContext()
  .getRealPath(path));
  if (!file.getParentFile().exists()) {
  file.getParentFile().mkdirs();
  }
  item.write(file);
  // logger.info(path);
  // break;
  ob.accumulate(\"url\", path);
 }
 }

 resp.setContentType(\"text/html; charset=UTF-8\");
 resp.getWriter().write(ob.toString());
 } catch (Exception e) {
 e.printStackTrace();
 } finally {
 // 响应客户端
 // resp.setContentType(\"text/html; charset=UTF-8\");
 // resp.getWriter().write(ob.toString());
 }
 }
}

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

本文地址：https://www.stayed.cn/item/9242

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案