zoukankan      html  css  js  c++  java
  • uploadify.v2.1.0 使用总结

    说明:最近在做项目的时候打算用jquery上传照片,网上的资料很多,但是很多都是复制粘贴的,而且有些要点都没提到,所以自己小结下。具体的参数含义网上很多,大家

    1:在网上下载uploadify.v2.1.0

    2:从中找出必须的文件:
          (1):jquery-1.3.2.min.js
          (2):jquery.uploadify.v2.1.0.min.js
           (3):swfobject.js
           (4):uploadify.css
           (5):uploadify.swf
          自己分配好路径

    3:然后再引用的页面导入:

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="${pageContext.request.contextPath}/js/swfobject.js"></script>
     <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.uploadify.v2.1.0.min.js"></script> <link 
      <link href="${pageContext.request.contextPath}/css/uploadify.css"  rel="stylesheet" type="text/css" />

    4:在head中写入:

     <script type="text/javascript">
      $(document).ready(function() {
       $("#uploadify").uploadify({
          'uploader': '${pageContext.request.contextPath}/swf/uploadify.swf?random=' + (new Date()).getTime(),
          'cancelImg':'${pageContext.request.contextPath}/images/cancel.png',
          'script': '${pageContext.request.contextPath}/teacher/admin_account_student_create_uploadImage',//要提交到的处理文件上传的PHP文件
          'folder': '${pageContext.request.contextPath}/studentPhotos',//要上传到哪个目录下,可以使用../../images这样的路径
          'auto'           : false, //是否自动开始   
                'multi'          : false, //是否支持多文件上传   
                'buttonText'     : 'browe', //按钮上的文字   
                'simUploadLimit' : 1, //一次同步上传的文件数目   
                'sizeLimit'      : 19871202, //设置单个文件大小限制   
                'queueSizeLimit' : 1, //队列中同时存在的文件个数限制   
                'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的  
                'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式     
                onComplete: function (event, queueID, fileObj, response, data) {   
                    $('<li></li>').appendTo('.files').text(response);   
                },   
                onError: function(event, queueID, fileObj) {   
                    alert("文件:" + fileObj.name + "上传失败");   
                },   
                onCancel: function(event, queueID, fileObj){   
                    alert("取消了" + fileObj.name);   
                }   
       });
      });  
     </script>

    5:在body中写入:

    <div id="fileQueue"></div> 
         <input type="file" name="uploadify" id="uploadify" /> 
          <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|  
          <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>

    效果:

    一开始:点击browe选中图片后:

    注意问题:

    1:如果不出现browe按钮那可能是'uploader': '${pageContext.request.contextPath}/swf/uploadify.swf?random=' + (new Date()).getTime(), 路径出错

    2:点击browe第一次能够成功上传,但是之后怎么点都没反应而且每发删除选中的图片,是因为浏览器缓存的问题,可以像上面的路径一样加上?random=' + (new Date()).getTime(),  //上面已经处理

    3:browe无法显示中文,可以替换'ButtonText'为'buttonImg'  : '图片路径',
    4:一定要注意版本问题:2.x和3.x的参数很多是不一样,而且上传的函数调用也有不同
    5:在3.x的版本中最低要求jquery.js的版本最低为1.4.x以上,所以还要注意匹配版本问题哈!
    6:在使用该插件想验证端发送url的使用,如果想要传递参数可以有两种做法,而且可以采用,,分割上传多个参数:
        :添加'scriptData':{'studentId':$('#studentId').val()},    ,但是要注意一定要写上另外一句:'method':'GET;  ,而且这里面如果使用EL表达式的会失败,我试过是这样的
        :修改上传语句:<a href="javascript:$('#uploadify').uploadifySettings('scriptData',{'studentId':${student.userId}});$('#uploadify').uploadifyUpload()">上传</a>| ,
               在这里面动态定义参数。

  • 相关阅读:
    华为Mate8 NFC 时好时坏,怎么解决呢?
    linux下使用FreeRDP 连接 Windows 远程桌面
    Linux下如何查看系统启动时间和运行时间以及安装时间
    运维监控系统之Open-Falcon
    gitlab之邮箱配置
    Ubuntu系统日志
    安装docker-compose的两种方式
    Linux用户配置sudo权限(visudo)
    Centos7下部署两套python版本并存
    线上mongodb 数据库用户到期时间修改的操作记录
  • 原文地址:https://www.cnblogs.com/zhangxiaozhong/p/3232350.html
Copyright © 2011-2022 走看看