基于WebUploader的文件上传js插件
首先把地址甩出来，
里面有比较完整的demo案例文档，本文主要是基于文件上传和图片上传增加了大量的注释，基本保证了每行代码都有注释以助于理解，是对官网demo的增强版，希望可以帮助大家更好的理解该插件
首先是
rush:js;">
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 + '' +
'<p class="state">等待上传...
' +
'
' );
});
// 文件上传过程中触发，携带上传进度，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%">' +
'
' +
'
').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();
}
});
});
然后是图片上传
rush:js;">
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,// 文件接收服务端。调用代码，把图片保存在服务器端
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">' +
'![]()
' +
//创建一个为info的class
'<div class="info">' + file.name + '
' +
'
'
),$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('不能预览');
return;
}
$img.attr( 'src',src );
},thumbnailWidth,thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress',percentage ) {
var $li = $( '#'+file.id ),$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress">
')
.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">
').appendTo( $li );
}
$error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete',function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
});
下面是java的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器
1.首先我们应该为上传的文件建一个存放的位置，一般位置分为临时和真是文件夹，那我们就需要获取这俩个文件夹的绝对路径，在servlet中我们可以这样做
rush:java;">
ServletContext application = this.getServletContext();
String tempDirectory = application.getRealPath(Constant.TEMP_DIRECTORY) + "/";
String realDirectory = application.getRealPath(Constant.REAL_DIRECTORY) + "/";
然后建立文件工厂即仓库一个参数表示存放多大后flush，
diskFileItemFactory(Constant.SIZE_THRESHOLD,new File(tempDirectory));
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(500*1024*1024);//设置该次上传最大值为500M3,.解析请求正文，获取上传文件，不抛出异常则写入真是路径
rush:java;">
List
list = upload.parseRequest(request);
Iterator 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));
rush:java;">
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,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 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());
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
相关文章
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...
