码上敲享录 > jquery入门实例分享 > 使用uploadify控件上传文件最完整源码和步骤

使用uploadify控件上传文件最完整源码和步骤

上一章章节目录下一章 2017-11-21已有2885人阅读 评论(0)

使用uploadify控件上传文件最完整源码和步骤

uploadify控件上传文件的思路:点击提交按钮,把form中的数据传到后台保存到数据库,成功之后回到前端执行success方法,在success方法中获取刚刚保存到数据库生成的id,再把附件和id传到后台保存。

1.下载jquery-1.9.1.js,jquery-form.js和uploadify完整控件


2.页面代码

 <html>

 <head>

 <title></title>

 <script type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>

<link rel="stylesheet" href="pages/process/form/js/uploadify/css/uploadify.css" type="text/css">

<script type="text/javascript" src="pages/process/form/js/uploadify/jquery.uploadify-3.1.js"></script>

<script type="text/javascript" src="js/jquery/jquery-form.js"></script>

</head>

<body>

 <form id="formobj"  name="formobj" method="post">

     <input type="hidden" name="id" value="" >

     <input type="file" name="fileBtn" id="fileBtn" />

     <div class="form" id="filediv_fileBtn"> </div>

 </form>

  <button onclick="btnClick()"  name="button">确定</button>

</body>

<script type="text/javascript">

$(function(){$('#fileBtn').uploadify({                                  

buttonText:'添加文件',

auto:false,

progressData:'speed',

multi:true,

height:25,

overrideEvents:['onDialogClose'],

fileTypeDesc:'文件格式:',

queueID:'filediv_fileBtn',

fileTypeExts:'*.rar;*.zip;*.doc;*.docx;*.txt;*.ppt;*.xls;*.xlsx;*.html;*.htm;*.pdf;*.jpg;*.gif;*.png',

fileSizeLimit:'15MB',

swf:'pages/process/form/js/uploadify/uploadify.swf',//在控件中引进来即可

uploader:'cgUploadController.do?saveFiles&jsessionid='+$("#sessionUID").val()+'',//附件保存的地址

onUploadStart : function(file) { //执行后台代码前执行

var cgFormId=$("input[name='id']").val();

$('#fileBtn').uploadify("settings", "formData", {'cgFormId':cgFormId});//传参数      },

onQueueComplete : function(queueData) {},

onUploadSuccess : function(file, data, response) {//上传成功后执行

},

onFallback : function(){

alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试");

},

onSelectError : function(file, errorCode, errorMsg){

   switch(errorCode) {case -100:alert("上传的文件数量已经超出系统限制的"+$('#fileBtn').uploadify('settings','queueSizeLimit')+"个文件!");break;

                  case -110:alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#fileBtn').uploadify('settings','fileSizeLimit')+"大小!");break;

                  case -120:alert("文件 ["+file.name+"] 大小异常!");break;

                  case -130:alert("文件 ["+file.name+"] 类型不正确!");break;}},

onUploadProgress : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { }//上传等待效果

                                   });

      });


function btnClick(){

 var form = $('#formobj');    

 var options  = {      

     url:'cgFormBuildController.do?saveOrUpdateMore',//表单保存的地址      

     type:'post',

     dataType:'json',    

     success:function(data)      

     {    //成功执行的方法  

    if(data.success==true){

             uploadFile(data);

           }

     }      

 };      

 form.ajaxSubmit(options);

 }


function uploadFile(data){

                 var id =data.id;//获取从后台返回的表单id

 f(!$("input[name='id']").val()){

 $("input[name='id']").val(id);

 }

 if($(".uploadify-queue-item").length>0){

 $("#fileBtn").uploadify('upload', '*')

 }

 }

</script>

</html>


向大家推荐《Activiti工作流实战教程》:https://xiaozhuanlan.com/activiti
1

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交