Uploadify 应用
来源:互联网 发布:mongodb linux cache 编辑:程序博客网 时间:2024/05/21 20:30
来自:http://student.csdn.net/space.php?uid=216968&do=blog&id=55236
昨天猫意外地发现数据库中存在放图片路径的字段 想想将计就计吧 正好没折腾过文件上传
跑去问了可爱的搞web的朋友 答曰自己用js写 瞬间呆住 立即反映过来 自己被.net惯坏了
于是跑去看了<input type="file" />标签 发现在格式控制上很不方便 用自己写js 当选择的格式不是自己规定的 再弹alter提醒 不喜(这里欢迎拍砖!)
通过js限定格式资料:http://huagenli.javaeye.com/blog/498063
想想 还是找插件吧 把目标放在了JQuery上 于是发现了一个用JQuery写的插件---uploadify
官网:http://www.uploadify.com/
下载完了后
把要需要的东西导入就行了:(这里我用到了cancel.png, jquery-1.4.2.min.js, jquery.uploadify.v2.1.4.min.js, uploadify.css, swfobject, uploadify.swf 都在下载的压缩包中 找出来放到项目中就行了)
<script src="/Content/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Content/Scripts/swfobject.js" type="text/javascript"></script>
<script src="/Content/Scripts/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<link href="/Content/Styles/uploadify.css" rel="stylesheet" type="text/css" />
我们先在html中加入一个<input id="fileInput" name="fileInput" type="file" />
然后添加 <a href="javascript:$('#fileInput').uploadifyUpload();">上传</a>
然后来看看参数设置
这是我的设置: 由于我用的是asp.net mvc3 所以script就改成了相应的Action路径 能发现我这个是Login控制器下的Register Action
<script type="text/javascript">
$(function() {
//上传
$('#fileInput').uploadify({
'uploader': '../../Content/Flash/uploadify.swf',
'script': '/Login/Register',
'folder': '/UploadFiles',
'cancelImg': '/Content/Images/cancel.png',
'fileExt': '*.jpg;*.gif;*.bmp;*.png',
'fileDesc': '*.jpg;*.gif;*.bmp;*.png',
'sizeLimit': 1024 * 1024 * 4, //4M
'multi': false,
'onComplete': fun,
'wmode':'transparent'
});
});
function fun(event, queueID, fileObj, response, data) {
if (response != "") {
showInfo("成功上传"+response, true); //showInfo方法设置上传结果
}
else {
showInfo("文件上传出错!", false);
}
}
</script>
控制器:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using EntityModel;
using System.Data.Entity;
using SuperMarketSystem.LoginServiceReference;
namespace SuperMarketSystem.Controllers
{
public class LoginController : Controller
{
//
// GET: /Login/
public ActionResult Login()
{
return View();
}
[HttpPost]
public ActionResult Login(FormCollection formCollection)
{
string userName = formCollection["txtUserid"];
string userPwd = formCollection["txtPwd"];
//调用服务
LoginServiceReference.LoginClient login = new LoginClient();
User loginuser = login.ToLogin(userName, userPwd);
if (loginuser != null)
{
return RedirectToAction("Index", "Home", new { id = loginuser.UserID });
}
else
{
Response.Write("<script>alert('用户名或密码错误!')</script>");
return View();
}
}
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(HttpPostedFileBase FileData, string folder,FormCollection formCollection)
{
return View();
}
}
}
uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。 fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。 onInit : 做一些初始化的工作。 onSelect :选择文件时触发,该函数有三个参数 onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象有以下几个属性: onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数,前三个参数同onSelect 中的三个参数,data对象有两个属性fileCount和allBytesTotal。 onClearQueue :当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel 中的两个对应参数。 onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。 onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。 onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数,参数的解释同上。 onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列,在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数,前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed: onComplete:文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数,前三个参数同上。response为后台处理程序返回的值,在上面的例子中为1或0,data有两个属性fileCount和speed
script : 后台处理程序的相对路径 。默认值:uploadify.php
checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method : 提交方式Post 或Get 默认为Post
scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain
folder : 上传文件存放的目录 。
queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。
queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。
multi : 设置为true时可以上传多个文件。
auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本
sizeLimit : 上传文件的大小限制 。
simUploadLimit : 允许同时上传的个数 默认值:1 。
buttonText : 浏览按钮的文本,默认值:BROWSE 。
buttonImg : 浏览按钮的图片的路径 。
hideButton : 设置为true则隐藏浏览按钮的图片 。
rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。
width : 设置浏览按钮的宽度 ,默认值:110。
height : 设置浏览按钮的高度 ,默认值:30。
wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。
cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标,如下图:
参考资料:
在asp.net webform上的应用:http://www.cnblogs.com/Lewis/archive/2010/04/27/1722024.html
在asp.net mvc上的应用:http://www.cnblogs.com/dingji/archive/2010/07/07/1772909.html
接下来我们来看看效果 这里我犯了一个低级错误,我用的firefox进行调试的 发现uploadify.swf没有显现出来 所以我没法进行选择文件 直接点上传文件 会出错 试了几次后我换了ie进行调试 才发现是firefox没有把.swf加载进来 于是安装flash插件 显示成功(汗喔..)
我试了下上传 发现出现了iO Error的提示
这个问题要在web.config 中配置,代码:
<system.web>
<httpRuntime maxRequestLength= "102400 " executionTimeout= "60" />
</system.web>
需要上传更大的文件,只要设置maxRequestLength属性即可
现在试了下 上传成功~
然后俺觉得选择文件的图标不好看 能不能换成自己的呢
我们把uploader属性改成自己想要用的图片
$(function() {
//上传
$('#fileInput').uploadify({
'uploader': '../../Content/Images/qzw.jpg',
'script': '/Login/Register',
'folder': '/UploadFiles',
'cancelImg': '/Content/Images/cancel.png',
'fileExt': '*.jpg;*.gif;*.bmp;*.png',
'fileDesc': '*.jpg;*.gif;*.bmp;*.png',
'sizeLimit': 1024 * 1024 * 4, //4M
'multi': false,
'onComplete': fun
});
});
然后运行 啊咧 发现图片两旁好多空白啊 于是我们在后面加上 'wmode':'transparent'
ok 再运行一下 空白消失
参考资料:
JQupery上传插件Uploadify详解及其中文按钮解决方案:http://hi.baidu.com/user_pyw/blog/item/bd24f74221d8f01d9313c631.html
至于后台怎么处理 在这里有说明:
http://www.cnblogs.com/dingji/archive/2010/07/07/1772909.html
- Uploadify 应用
- springMVC uploadify的应用
- Uploadify在Struts2中的应用
- Uploadify在Struts2中的应用
- Uploadify
- uploadify
- Uploadify
- uploadify
- Uploadify
- uploadify
- Uploadify + Struts2 应用之分析与详解
- Uploadify + Struts2 应用之分析与详解
- Uploadify上传在Struts2中的应用
- java应用jquery uploadify 3.2 丢失session
- java应用uploadify 3.2丢失session
- 上传文件插件uploadify应用简单说明
- uploadify 3.2 java应用丢失session
- bootstrap-datetimepicker和uploadify应用总结
- 使用scons替代makefile(3)
- ASP.NET弹出对话框几种基本方法
- 如何进入到嵌入式系统开发行业
- 原创jquery-button 全局动画
- Ubuntu 安装eclipse的方法
- Uploadify 应用
- vi文件保存退出命令":wq"和":x"的区别(经典深入剖析)
- Linux的诞生,成长,历史,杂谈
- Ext中常用的事件,备查
- 对昨天错误的总结
- 我对apache、tomcat、php服务理解一直以来的误区
- SDRAM工作原理及S3C2410 SDRAM控制器配置方法(1) 收藏
- HTML 5 事件属性
- 验证整数、小数、实数、有效位小数最简单JavaScript正则表达式