上传插件,较轻量级,带进度条 jquery.uploadify
2014-05-27 04:33
399 查看
jquery.uploadify+upload.js
upload.js
一个比较通用的js
jsp中引用这三个js,然后注意form表单的id和name,最后提交做成按钮形式,因为
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>
相关文章推荐
- jquery.uploadify插件与java web的结合实现多文件上传+进度条
- JQuery uploadify 上传插件使用
- jQuery Uploadify上传插件使用中的问题 中文字符文件名转英文
- Jquery uploadify图片上传插件,无法上传的解决方法
- jquery uploadify 实现批量上传,带进度显示,判断文件大小
- 图片上传插件jquery.uploadify
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- jquery uploadify 多文件上传插件 使用经验
- Jquery Uploadify插件+Servlet解决FTP多文件上传
- 解决jquery.uploadify上传插件导致google崩溃
- 关于文件上传jQuery插件jquery.uploadify的使用心得
- 利用jquery.uploadify插件来实现图片上传和预览效果
- jquery uploadify插件多文件上传
- jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
- jquery.uploadify插件实现图片上传和预览效果
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- jquery uploadify上传插件用法心得
- Jquery Uploadify上传带进度条
- jquery uploadify上传插件若干问题总结