使用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>