这篇文章主要为大家详细介绍了基于WebUploader的文件上传js插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
首先把地址甩出来，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( '' + '' + file.name + '
' + '等待上传...
' + '' ); }); // 文件上传过程中触发，携带上传进度，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 = $('' + '' + '' + '').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 '' + '' + //创建一个为info的class '' + 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', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复创建 if ( !$percent.length ) { $percent = $('
') .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 = $('').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 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));
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 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-600"; } 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-600"; } //获取文件的是那种格式 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的文件上传js插件的详细内容，更多请关注本站其它相关文章！
