基于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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
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伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
Flask之flask-script模块使用
2018/07/26 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python 实现客户端与服务端的通信
2020/12/23 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python