您的位置:首页 > Web前端 > JQuery

上传插件,较轻量级,带进度条 jquery.uploadify

2014-05-27 04:33 399 查看
jquery.uploadify+upload.js

upload.js

//附件的路径
var adjunctPath='';

//附件上传失败则不能保存
var canSubmit=true;

var uploadify=$("#uploadify");

var uploader="";

function getRootPath(){
var pathName=window.document.location.pathname;
//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(projectName);
}

function prepareUpload(uploadFold,size){
uploader=$("#uploadify").uploadify({
'auto'           : false,
'swf'            : getRootPath()+'/resources/js/upload/uploadify.swf',
//这个的作用是为了上传
'uploader'       : getRootPath()+'/book/upload',
'formData'       : {"fold":uploadFold},
'queueID'        : 'fileQueue',//与下面的id对应
'queueSizeLimit' : size,
'fileTypeDesc'   : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;',
'fileTypeExts'   : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
'multi'          : true,
'buttonText'     : '添加图片',
'cancel'         : getRootPath()+'/resources/js/upload/uploadify-cancel.png',
'onUploadSuccess':function(file, data, response){//上传成功后获得回调函数,这里为了取得文件上传成功后的保存路径
//	    	adjunctPath+=data+";";
adjunctPath+=data;
//这里就调用了onUploadSuccess(),在另一js中有定义
onUploadSuccess();
},
'onUploadError':function(file, errorCode, errorMsg, errorString){//上传错误的信息
canSubmit=false;
onUploadError();
},
'onQueueComplete' : function(queueData) {//上传队列全部完成后执行的回调函数
onQueueComplete();
},
'onSelect':function(file){
onSelect(file);
}
} );
}


一个比较通用的js

$(function(){
prepareUpload("",1);

//提交表单
$("#submitBtn").click(function(){
//验证表单
if($("#dataForm").valid()){
if($("#fileQueue").text()!=''){
var date=new Date();
var fold=date.format("yyyyMMddhhmmss")+"_"+$("#name").val();
//开始上传
$("#uploadify").uploadify("settings","formData",{'fold':fold});
$('#uploadify').uploadify('upload','*');
}else{
//setVMessage("请选择要上传的课件!");
alert("请选择要上传的图片!");
}
}
});
});

/**
* 日期格式化,格式化为自己想要的,如20140527
*/
Date.prototype.format = function(format){
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond
}

if(/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}

for(var k in o) {
if(new RegExp("("+ k +")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
}
}
return format;
}

/*
* 上传插件的方法重载
*
* start
*/
function onSelect(file){
var fileName=file.name;
fileName=fileName.substring(0,fileName.lastIndexOf("."));
//给id="name"注入值,为fileName
$("#name").val(fileName);
}

function onUploadSuccess(){
//给id = "dirPath"注入值,为存储的位置,在upload.js中可以看到
$("#dirPath").val(adjunctPath);
//upload.js有这么一句话:
//附件上传失败则不能保存
//var canSubmit=true;
if(canSubmit){
document.dataForm.submit();
}
}


jsp中引用这三个js,然后注意form表单的id和name,最后提交做成按钮形式,因为
$("#submitBtn").click(function(){
<style type="text/css">
.uploadify-button {
background-color: transparent;
border: none;
padding: 0;
}
.uploadify:hover .uploadify-button {
background-color: transparent;
}
</style>


<input type = "hidden" id = "dirPath" name= "dirPath" />
<table>
<tr>
<th>选择封面插图:</th>
<td><input type="file" name="uploadify" id="uploadify" />
<h6>*只支持单个图片上传</h6>
<div id="fileQueue"></div></td>
</tr>
<tr>


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: