基于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 相关文章推荐
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
a标签调用js的方法总结
Sep 05 Javascript
Vue组件生命周期运行原理解析
Nov 25 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
15种PHP Encoder的比较
2007/04/17 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
JS中的三个循环小结
2017/06/20 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
linux下python抓屏实现方法
2015/05/22 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
python函数超时自动退出的实操方法
2020/12/28 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
5.1手机促销活动
2014/01/17 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
社区活动总结范文
2015/05/07 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书