uploadify上传
一、上传按钮样式
1.1id="show_filebutton"是显示给用户操作按钮,id="filebutton"是flash上传按钮完成用户上传操作。id="show_filebutton"按钮样式不需要变,只需要将id="filebutton"按钮覆盖在id="show_filebutton"按钮上面就行了。
1.2uploadify会生成自己的html元素class="swfupload"
<html>
<body>
<head>
<style>
.swfupload{background:red;} //设置flash上传按钮背景颜色。可以看到按钮方便设置宽高等css属性
.swfupload{width: 120px;height: 35px; top: -35px;left: 50px;opacity:0;} //flash上传按钮覆盖美工提供过来的上传按钮,uploadify上传按钮本身就是透明不可见,这样方便我们覆盖在按钮上面达到效果
</style>
</head>
<button id="show_filebutton" type="button">导入数据文件</button>
<button type="button" id="filebutton"></button>
</body>
</html>
二、绑定上传按钮事件
$(document).ready(function(){
$("#filebutton").uploadify({
'swf' : '/plugin/uploader/uploadify.swf',
'uploader' : '/simple/upload.do',
'buttonClass' : 'upload',
'buttonText' : '',
'width': 'auto',
'queueID' : "upload_queue",
'auto' : false,
'fileObjName' : 'uploads',
'multi' : false, //多文件上传
'fileSizeLimit' : 2048 , //限制文件的大小,默认单位是KB
'uploadLimit' : 1,
'fileTypeDesc' : '支持资源格式:',
'fileTypeExts' : '*.xls;*.xlsx;',
'onUploadStart' : function(file){
$('#filebutton').uploadify("settings", "formData", {para:1});
},
'onUploadSuccess' : function(file, data, response) {
var uploadLimit = $("#filebutton").uploadify('settings', 'uploadLimit'); //get
$("#filebutton").uploadify('settings', 'uploadLimit', uploadLimit+1); //set
$("#downloadfilename").val(data);
}
});
});
java上传代码
public class Upload(){
public void uploadImage(){
UUID uuid = UUID.randomUUID();
String sysPath = getSession().getServletContext().getRealPath("");
File tempFile = new File(sysPath+"/upload/temp/");
if(!tempFile.exists()){
tempFile.mkdirs();
}
UploadFile upfile = getFile("image");
if(upfile != null){
File file = upfile.getFile();
String fileName = uuid+"_"+file.getName();
String filepath = "/upload/temp/"+fileName;
file.renameTo(new File(sysPath+filepath));
setAttr("filepath", filepath);
}
renderJson();
}
}
uploadify上传的更多相关文章
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:
19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...
- Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
- 使用uploadify上传控件无法进入后台问题分析
分别在.net mvc 和java struts2中使用到 uploadify上传 文件,遇到同样的问题,选中文件上传后,文件无法上传,打上断点后发现没有进入后台. 逐步断点发现 项目共同点是加入了 ...
- Uploadify上传Excel到数据库
前两章简单的介绍了Uploadify上传插件的基本使用和相关的属性说明.这一章结合Uploadify+ssh框架+jquery实现Excel上传并保存到数据库. 以前写的这篇文章 Jq ...
- 文件上传~Uploadify上传控件~续(多文件上传)
对于Uploadify文件上传之前已经讲过一次(文件上传~Uploadify上传控件),只不过没有涉及到多文件的上传,这回主要说一下多个文件的上传,首先,我们要清楚一个概念,多文件上传前端Upload ...
- uploadify上传控件中文的乱码解决办法
uploadify上传控件中文的乱码解决办法 网站用的gb2312的编码,用uploadify上传控件上传中文时在IE能部分成功,FF,Chrome则完全失败,查找了一天原因,结果发现是页面编码问题, ...
- jquery的uploadify上传jsp+servlet
1.准备材料:下载jquery.uploadify上传js 注意:这个上传在firefox下会出现问题如果你在项目中加了拦截器,因为session会丢失,所以你可以传参的时候带上你所需要的条件,在 ...
- 解决Uploadify上传控件加载导致的GET 404 Not Found问题
今天在项目发用到Uploadify上传, 发现在打开页面时会有一多余的请求,由于路由没有设置这个,导致404错误,能搜索查到以下解决的方法 <Uploadify v3 bug. Unecessa ...
- uploadify上传文件(2)--基础语法
隔了好久,因为最近搬家,离开从小生活的城市,来到杭州.找工作.找房子等诸多事宜耽误了这篇文章许久.今天难得闲暇在旅馆中完成uploadify上传文件系列的第二篇--uploadify使用的基础语法. ...
随机推荐
- python利用or在列表解析中调用多个函数.py
python利用or在列表解析中调用多个函数.py """ python利用or在列表解析中调用多个函数.py 2016年3月15日 05:08:42 codegay & ...
- Mysql 基本操作连接数据库读取信息内容
<?php header("content-type:text/html; charset=utf-8"); // 数据库配置信息 define("DB_HOST& ...
- (转)Ratchet教程:meta与link标签
原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签 ...
- (转)mysql账号权限密码设置方法
原文:http://www.greensoftcode.net/techntxt/2013410134247568042483 mysql账号权限密码设置方法 我的mysql安装在c:\mysql 一 ...
- php大力力 [027节] 被百度收录较好的几个视频网站示例
php大力力 [027节] 被百度收录较好的几个视频网站示例 56网 很清晰 :2014 兄弟连高洛峰 PHP教程14.1.7 在PHP脚本中操作MySQL数据库4_视频在线观看 - 56.com 土 ...
- BZOJ 1954 The xor-longest Path
问题转化为一些数里面选两个数异或和最大. #include<iostream> #include<cstdio> #include<cstring> #includ ...
- 如何去除内联元素(inline-block元素)之间的间距(转载)
如何去除内联元素(inline-block元素)之间的间距 前几天写一个专题页 div{width:900px;}div a{ display:inline-block; width:300px; ...
- Unity3D ShaderLab 静态贴图光照模型
Unity3D ShaderLab 静态贴图光照模型 其实在unity的光照模型中,我们可以把光照讯息烘培进入一个2D贴图,来实现着色器的光照效果. 下面是在unity中关闭灯光和打开灯光的对比效果. ...
- Qt5 QTableWidget设置列表自动适应列宽
//设置自动适应列宽 ui->tableWidget->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
- test Windows Live Writer
1, 下载Live Writer http://windows.microsoft.com/zh-cn/windows-live/essentials-other#essentials=overvie ...