基于WebUploader的文件上传js插件_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());
 }
 }
}

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

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

时间： 2024-10-18 12:45:59

基于WebUploader的文件上传js插件_javascript技巧的相关文章

ajaxFileUpload.js插件支持多文件上传的方法_javascript技巧

前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

Bootstrap的fileinput插件实现多文件上传的方法_javascript技巧

*1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinput({ uploadUrl : "/upload_img",//上传图片的url allowedFileExtensions : [ 'jpg', 'png', 'gif' ], ov

js 实现 input type=&amp;quot;file&amp;quot; 文件上传示例代码_javascript技巧

在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he

AngularJS+Bootstrap实现多文件上传与管理_javascript技巧

最近一个项目中需要实现多文件上传与管理,而项目是基于bootstrap开发的,所以查了一些bootstrap文件上传插件,最后发现还是bootstrap-fileinput最美观,该插件可以实现多文件的上传与管理(插件官方地址:http://plugins.krajee.com/file-input),具体的效果如下:   (bootstrap-fileinput不局限于图片上传,也可以实现文件上传,但图片的缩略图容易辨识,这里就以图片上传为例)  该插件基本的操作可以参考:JS文件上传神器bo

JavaScript File API实现文件上传预览_javascript技巧

一.概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相

JavaScript File API文件上传预览_javascript技巧

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

Bootstrap自定义文件上传下载样式_javascript技巧

在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label

AJAX实现基于WEB的文件上传的进度控制

ajax|web|控制|上传 1. 引言  2. 实现代码  2.1. 服务器端代码  2.1.1. 文件上传状态类(FileUploadStatus)  2.1.2. 文件上传状态侦听类(FileUploadListener)  2.1.3. 后台服务类(BackGroundService)  2.1.4. 文件上传状态控制类(BeanControler)  2.2. 客户端代码  2.2.1. AjaxWrapper.js  2.2.2. fileUpload.html  2.2.3. re

AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页_AJAX相关

1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c