plupload学习笔记

来源:互联网 发布:广东飞鱼网络 编辑:程序博客网 时间:2024/06/05 15:15

plupload是一个前端支持多文件上传的插件,非常好用。

具体流程如下

1.首先实例化一个plupload对象uploader,实例化的时候进行参数设置(上传方式,大小,格式等);
2.在进行文件上传过程中,可以利用对象的方法进行很多监听和控制;
3.文件上传完,可以利用对象的方法再次添加或删除队列中的文件;

下面粘贴代码:

1.引入js:
plupload.jsplupload.silverlight.jsplupload.html5.jsplupload.html4.jsplupload.gears.jsplupload.flash.jsplupload.browserplus.js<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
2.前台js代码:
<script type="text/javascript">//pluploadfunction getId(id) {    return document.getElementById(id); }//创建一个实例var uploader = new plupload.Uploader({    runtimes : 'gears,html5,flash,silverlight,browserplus',    browse_button : 'pickfile',//要触发选择文件的按钮或链接的id    url : 'fileModifyAction!uploadFile.do',//配置文件上传调用的后台方法    max_file_size : '1024mb', //最大上传    multipart : 'true',    resize : {width : 320, height : 240, quality : 90},    filters : [//配置上传格式要求(就这样写,api里的有问题出不来效果        {title : "Image files", extensions : "jpg,gif,png" }, )        {title : "Doc files", extensions : "doc,docx"},        {title : "Ppt files", extensions : "ppt,pptx"},        {title : "Pdf files", extensions : "pdf"}    ]});//初始化uploader.init();//监听方法bind----监听的是(FilesAdded表示文件上传到队列的事件)uploader.bind('FilesAdded', function(up, files) {    for (var i in files) {        //addrow(files[i].name,files[i].size);自己写的方法,文件上传到队列后前台显示出来    }});--监听方法bind---监听的是(UploadProgress表示文件上传完成的事件)uploader.bind('UploadProgress', function(up, file) {    //setFormat(file.name);自己写的方法,当文件上传完成后做什么事情});--开始上传方法,自动调用url配置的action的方法uploader.start();//这个方法写在上传按钮或链接触发后的js函数里面</script>
3.后台代码:
aaaAction.java /** * 文件上传 * @param request * @param response * @return * @throws IllegalStateException * @throws IOException */public String uploadFile() throws IllegalStateException, IOException {      ParamDTO dto = super.getDto();    //初始化通用multipart解析器      String realpath = ServletActionContext.getServletContext().getRealPath("/uploadFile") ;//获取服务器路径    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());      String resultStr = "";      int maxPostSize = 1 * 100 * 1024 * 1024;     //判断请求中是否有文件上传      if (!multipartResolver.isMultipart(request)) {          //请求为空,直接返回          return null;    }    //解析请求,将文件信息放到迭代器里         MultiPartRequestWrapper multiRequest = (MultiPartRequestWrapper)request;    String[] filenames = multiRequest.getFileNames("file");    String filename = filenames[0];    File[] files = multiRequest.getFiles("file");    theFile = files[0];    if (theFile!= null) {        String pathString = theFile.getPath();        File file1 = new File(realpath, filename);        file1.createNewFile();        //获得上传的文件流        InputStream in = multiRequest.getInputStream();        InputStream ins = new FileInputStream(pathString);        OutputStream ous = new FileOutputStream(file1);        byte[] buffer = new byte[1024];        int len = 0;        while((len=ins.read(buffer)) > -1)            ous.write(buffer, 0, len);        //关闭流        ous.close();        ins.close();        //删除零时文件        theFile.delete();         }    else {        //文件为空    }    return null;  }

以上代码从前台到后台实现了多文件上传的功能.

原创粉丝点击