基于WebUploader的文件上传插件

首先把地址甩出来，http://fex-team.github.io/webuploader/

里面有比较完整的demo案例文档，本文主要是基于文件上传和图片上传增加了大量的注释，基本保证了每行代码都有注释以助于理解，是对官网demo的增强版，希望可以帮助大家更好的理解该插件

首先是文件上传

jQuery(function() {var $ = jQuery,$list = $('#thelist'),$btn = $('#ctlBtn'),state = 'pending',uploader;//初始化，实际上可直接访问Webuploader.upLoaderuploader = WebUploader.create({// 不压缩imageresize: 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 Uploaderuploader = 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 ) {//定义变量livar $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的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器

http://blog.csdn.net/zsw2zkl/article/details/7426007

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);@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// 类型 1事件上传文件 2apkString 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()) {//如果上传的文件大于指定的大小则returnif (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());}}
}

基于WebUploader的文件上传插件相关推荐

【转】jquery文件上传插件uploadify在.NET中session丢失的解决方案
2019独角兽企业重金招聘Python工程师标准>>> 基于jQuery和Flash的多文件上传插件uploadify的确很好用,具体配置和使用方法见以前的一篇文章: <一款基 ...
基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
（转）基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
文件上传插件WebUploader的使用
文件上传插件WebUploader的使用插件描述: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里 ...
功能强大的文件上传插件带上传进度-WebUploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...
ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
20+ 个很棒的 jQuery 文件上传插件或教程（此文值得“推荐”和“收藏”）
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验.本文介绍20个jQuery的文件上传插件,其中有一些是教程. 1. Plupload Plupload ...
Bootstrap文件上传插件File Input的使用
1.文件上传插件File Input介绍这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugin ...
jquery 文件上传插件_10个jQuery文件上传插件
jquery 文件上传插件这篇热门文章于2016年7月更新,以反映文件上传插件的当前状态. 有关旧文章的评论已删除. 使用Ajax实施文件上传可能非常困难,特别是如果您需要拖放支持,图像预览或进度条 ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

基于WebUploader的文件上传插件

基于WebUploader的文件上传插件相关推荐

最新文章

热门文章