Jfinal+Jquery uploadify实现多文件上传实例

访客8年前 (2017-05-16)Jfinal3791


包文件

图片.png

外部jar包


jfinal-2.0-bin-with-src.jar(JFinal核心包)  
fastjson-1.2.7.jar(用于json数据的处理)  
cos-26Dec2008.jar(支持JFinal自带的上传功能)


1. 引入 css,js外部文件


<link id="bscss" href="${root}/bootstrap/css/bootstrap.css"
    rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${root!}/uploadify/uploadify.css">
<link rel="stylesheet" type="text/css"
    href="${root!}/webUploader/style.css"><!--从官网下载的实例中有 -->
<script src="${root!}/resource/front/js/jquery-1.9.1.min.js"
    type="text/javascript"></script>
<script src="${root!}/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script src="${root}/bootstrap/js/bootstrap.js" type="text/javascript"></script>
2.页面部分

用来放置webuploader的dom

 <form enctype="multipart/form-data" method="post">
               <input type="file" id="file_upload"  width="400px" > 
  </form>
   <br>
  <ul id="url" style="padding-left: 100px"></ul>
3.JS部分, 初始化webuploader组件,设置上传等事件监听。

     $(function() {
              //上传附件
    $('#file_upload').uploadify(
                            {
                                //校验数据
                                'swf' : '${root!}/uploadify/uploadify.swf', //指定上传控件的主体文件,默认‘uploader.swf’
                                'uploader' : '${root!}/front/complain/uploads/${cid}', //指定服务器端上传处理文件,默认‘upload.php’
                                'auto' : true, //手动上传
                                'buttonImage' : '${root!}/uploadify/uploadify-browse.png', //浏览按钮背景图片
                                'multi' : false, //单文件上传
                                 'method'   : 'post', 
                                //'fileTypeExts' : '*.gif; *.jpg; *.png; *.flv;*.avi;*.mp4;*.mp3;txt;zip;doc;zip', //允许上传的文件后缀
                                'fileSizeLimit' : '300MB', //上传文件的大小限制,单位为B, KB, MB, 或 GB
                                'successTimeout' : 35, //成功等待时间
                                'onUploadSuccess' : function(file, data,
                                        response) {//每成功完成一次文件上传时触发一次t
                                    var image=eval("["+data+"]")[0];
                                        $('#url').append(
                                                "<li> "+image.fileName+"</a> </li><br/>");
                                    //var image=eval(data);
                                    //alert(image[0]["big"]);<span ><a href='${root!}/uploadify/delete/'+image.fileName>删除</a><span>
                                },
                                'onUploadError' : function(file, data, response) {//当上传返回错误时触发
                                    $('#url').append("<li>" + data + "</li>");
                                }
                            });
});

4. 后台部分,获取文件

public class ComplainAddController extends Controller{
    
    /**
     * 上传附件
     */
    public void uploads() {
        String uuid = getPara();
        // 上传代码
        UploadFile uf = getFile("Filedata","comFile");
      
        //获得到了端口
        String url ="/upload/comFile/"+uf.getFileName();
        
        String fileName=uf.getFileName();
        ComplainFile comFile = new ComplainFile();
        comFile.setCaseId(uuid);
        comFile.setUrl(url);
        comFile.setName(fileName);
        comFile.setSuffiix(fileName.split("\\.")[1]);
        comFile.save();  
        setAttr("fileName",fileName);
        setAttr("uuid",uuid);
        renderJson();
    }
}



效果:

图片.png


不过此方法不支持手机端,若电脑端和手机端兼可用,可使用百度WebUploader插件,请参考

Jfinal +百度WebUploader组件实现多图片上传


本文原创,转载必追究版权。

分享给朋友:

相关文章

Oracle 数据库cmd命令备份

 //导出exp wsbspt/wsbspt@192.168.1.101/wsbs file=D:/wsbspt.dmp log=D:/wsbspt.txt//导入imp &nbs...

MyEclipse 8.5 新建 基于Xfire的webservice

MyEclipse 8.5 新建 基于Xfire的webservice

 使用Xfire实现Web Services,作业应当包括相关的实现软件代码以及对应的WSDL。 MyEclipse 8.5,XFire 1.2.6,weblogic 11g/TomcatX...

get/post方式调用http接口

get/post方式调用http接口

 1. 项目环境如下:myeclipse8.5 、tomcat5.0/weblogic、xp、JDK:开发1.5,编译1.4为了方便,在原来的web项目UpDown中新建了一个httpcal...

get方式调用http接口   Header赋参数值

get方式调用http接口 Header赋参数值

   /**      195.     * 发送...

org.apache.subversion.javahl.ClientException: The working copy needs to be upgraded svn: Working cop

org.apache.subversion.javahl.ClientException: The working copy needs to be upgraded svn: Working cop

SVN更新出现问题:org.apache.subversion.javahl.ClientException: The working copy needs to be upgraded svn: W...

iscroll+ ajax+ Jfinal 实现手机下拉加载更多

  <script src="${base}/resource/front/js/iscroll.js"></script>一、页面<div...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。