Jquery Uploadify多文件上传实例

jQuery Uploadify开发使用的语言是java。

详细的相关文档,可以参考官网的doc:http://www.uploadify.com/documentation/

官网的讲解还是很详细的,关键是要耐心看。虽说是英文,单有百度翻译。

看官网jQuery uploadify有基于flash和html5 的2个版本。我使用的是基于flash的。

Jsp页面引用的文件有:

<!-- 转诊单的附件商场页面 -->
<script type="text/javascript" src="${ctx}/res/skin/default/js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/res/skin/default/plugin/uploadify/js/uploadify.css">
<script type="text/javascript" src="${ctx}/res/skin/default/plugin/uploadify/js/jquery.uploadify.min.js"></script>

关于这个引用的js和css文件,个人建议使用官网给出的版本。

相关的jQuery Uploadify的代码:

<script type="text/javascript">
    $(function() {

        $(‘#uploadify‘).uploadify({
            ‘auto‘     : false,//是否选择文件后就上传,默认true。false有按钮触发
            ‘swf‘      : ‘${ctx}/res/skin/default/plugin/uploadify/js/uploadify.swf‘,//引用的adobe flash player插件的文件
            ‘uploader‘ : ‘${ctx}/ReferralInterface/saveAttachment?truntreatmentId=${truntreatmentId}‘,//访问后台的处理方法的路径${truntreatmentId}准备好的转诊单ID
            ‘buttonText‘:‘选择文件‘,//选择文件按钮的显示文字
            ‘fileSizeLimit‘:‘10MB‘,//允许最大文件上传的大小,可以是KB,MB,GB等。
            ‘queueID‘:‘fileQueue‘,//上传文件的队列存放dome的ID,一般为DIV
            ‘multi‘:true,//设置adobe flash player插件一次选择多个文件,默认为true。false一次选择一个
            ‘queueSizeLimit‘:10,//队列的demo中一次最大存放的文件数,不影响上传的数量,demo为queueID的div
            ‘uploadLimit‘:100,//可以上传的最大文件数,超出触发事件:onuploaderror
            ‘fileTypeExts‘:‘*.png;*.jgp;*.pdf;*.doc;*.docx‘,//可以上传的文件类型
            ‘onUploadSuccess‘:function(file,data,response){
            //onUploadSuccess文件上传成功的事件,
            //参数:file上传文件的对象,data服务器返回的参数,response执行的状态
            //因为data返回的数据类型为string,所以使用eval函数转换为json
            var json=eval("("+data+")");

            $("#filelist").append("<tr><td>"+file.name+"</td><td><img src=‘${ctx}/res/skin/default/plugin/uploadify/image/cancel.png‘/></td><td>下载</td></tr>");

            }

        });
    });
    </script>

相关的标签代码:

<input type="file" name="uploadify" id="uploadify" />
    <a href="javascript:$(‘#uploadify‘).uploadify(‘upload‘,‘*‘)">上传</a>
    <div id="fileQueue"></div><br/>

注意:id="fileQueue"对应的是‘queueID‘:‘fileQueue‘. ${ctx}是el表达式设置的基础路径变量。

后台代码是基于spring mvc,后台处理上传的代码:

/**
     * 保存附件
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    @ResponseBody
    @RequestMapping(value="/saveAttachment")
    public Map<String,String> saveAttachment(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Map<String,String> map = new HashMap<String,String>();
        //转诊单ID
        String truntreatmentId=request.getParameter("truntreatmentId");
        request.setCharacterEncoding("utf-8");
        DiskFileItemFactory factory = new DiskFileItemFactory();
        @SuppressWarnings("deprecation")
        String path = request.getRealPath("/AttachmentUpload/"+truntreatmentId);
        //判断文件夹是否存在不存在就创建文件夹
        File file=new File(path);
        if(!file.exists()){
            file.mkdir();
        }
        factory.setRepository(new File(path));
        factory.setSizeThreshold(1024 * 1024);
        ServletFileUpload upload = new ServletFileUpload(factory);
        try {
            // 可以上传多个文件
            List<FileItem> list = (List<FileItem>) upload.parseRequest(request);

            for (FileItem item : list) {

                if (!item.isFormField()) {
                    String name = item.getName();
                    OutputStream out = new FileOutputStream(new File(path, name));
                    InputStream in = item.getInputStream();
                    int length = 0;
                    byte[] buf = new byte[1024];
                    while ((length = in.read(buf)) != -1) {
                        out.write(buf, 0, length);
                    }
                    in.close();
                    out.close();
                    //将附件的数据添加到数据库下面部分代码是针对我当前的项目,请不要作为参考,到break位置
                    /** 将上传处理后的数据返回 **/
                    map.put("fileName", name);

                    //实例化附件类
                    SAttachment sAttachment=new SAttachment();

                    //文件的转诊单ID
                    sAttachment.settruntreatmentId(truntreatmentId);
                    //文件的名称
                    sAttachment.setattachmentName(name);
                    //文件保存路径
                    sAttachment.setattachmentUrl(path+"\\"+name);
                    sAttachment=referrallInterfaceService.saveSAttachment(sAttachment);
                    //获取附件ID
                    map.put("attachmentId", sAttachment.getattachmentId());
                    //获取附件的服务器保存路径
                    map.put("attachmentUrl", sAttachment.getattachmentUrl());
                    break;

                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("出错了:" + e.getMessage());
        }

            return map;
    }
时间: 2024-10-25 13:50:44

Jquery Uploadify多文件上传实例的相关文章

jquery uploadify 多文件上传插件 使用经验

Uploadify 官网:http://www.uploadify.com/ 一.如何使用呢? 官网原文:http://www.uploadify.com/documentation/uploadify/implementing-uploadify/在我理解的基础上,做了一些翻译吧,建议直接看官网原文,因为截止到发布这篇博客为止,官方的版本是v3.2.1使用之前我们来看下使用的最低要求. 要求 jQuery 1.4.x 或更新的版本Flash Player 9.0.24 或更新的版本服务器端实现

Struts2 + uploadify 多文件上传完整实例!

首先我这里使用的是  Jquery  Uploadify3.2的版本  导入相关的CSS  JS    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/uploadify/uploadify.css"> <script src="<%=basePath%>js/jquery.min.js"></sc

jquery组件WebUploader文件上传用法详解

这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法. 使用WebUploader还可以批量上传文件.支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件. 接下来我以图片上

uploadify多文件上传插件

这个插件是兼容IE8及以上版本的,实现了基本功能,底部有下载连接 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>uploadify多文件上传插件使用</title> <meta http-equ

使用uploadify实现文件上传

导入需要的js,css等文件 添加uploadify.jsp文件 //代码 <%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><% String path = request.getContextPath();String basePath = request.getScheme()+"://

uploadify多图片上传实例

upload.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>uploadify 多文件上传例子</title> <link rel="stylesheet" type="text/css" href="upload

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo

PHP中,文件上传实例

PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destination ) 本函数检查并确保由 filename 指定的文件是合法的上传文件(即通过 PHP 的 HTTP POST 上传机制所上传的).如果文件合法,则将 其移动为由 destination 指定的文件. 如果 filename 不是合法的上传文件,不会出现任何操作,move_uploaded_fi