基于WebUploader的文件上传js插件


Posted in Javascript onAugust 19, 2016

首先把地址甩出来,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());
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
详解webpack 多入口配置
Jun 16 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
JS获取checkbox的个数简单实例
Aug 19 #Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 #Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 #Javascript
浅谈js中test()函数在正则中的使用
Aug 19 #Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 #Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 #Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 #Javascript
You might like
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
利用php生成验证码
2017/02/23 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
超市业务员岗位职责
2013/12/05 职场文书
遗嘱继承公证书
2014/04/09 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
初三英语教学反思
2016/02/15 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书