铁雪资源网 Design By www.gsvan.com
首先把地址甩出来,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()); } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无基于WebUploader的文件上传js插件的评论...