基于WebUploader的文件上传js插件

首先把地址甩出来，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的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器

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（）） {//如果上传的文件大于指定的大小则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（））; } }}

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