基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件.

    <link href="~/Content/themes/uploadify.css" type="text/css" rel="stylesheet" />
<script src="~/Scripts/jquery.uploadify.min.js" type="text/javascript"></script>

首先添加引用文件uploadify.js 和 uploadify.css

创建一个file input, 基于这个file 初始化uploadify

<input type="file" id="uploadify" name="uploadify" />
$(this).ready(function () {
$('#uploadify').uploadify({
'swf': '/Uploadify/uploadify.swf',
'uploader': '/Home/Upload',
'buttonText': 'Browser',
'fileDataName': 'file',
'fileTypeDesc': 'File',
'fileTypeExts': '*.jpg; *.jpeg; *.tiff; *.gif; *.bmp; *.png; *.pdf; *.doc; *.docx; *.docm; *.xls; *.xlsx; *.xlsm; *.ppt; *.pptx; *.txt',
'cancelImg': '/Uploadify/uploadify-cancel.png',
//'folder': 'UploadFile'
// Your options here }); });

最后效果如下:

查看生成的html发现file input变成一个DIV。

基本原理是改变你创建的file input生成一个DOM结构,创建一个DIV按钮,按钮样式修改在uploadify.css文件中的.uploadify-button,将swf文件定位在按钮上面,这样当你点击按钮时实际上点击的是swf。

JQuery 上传文件插件 Uploadify1的更多相关文章

  1. JQuery上传文件插件Uploadify使用笔记

    新工作的第一份任务就是给实现 限制Uploadify 上传文件格式为图片 测试出来报错,选择了非图片文件,提示错误后,再选择其他文件,上传时还是包含了之前清空的非图片文件 最后实现效果的代码是 //上 ...

  2. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  3. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  4. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  5. uploadify 上传文件插件

    今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...

  6. [Plugin] JQuery.uploadify上传文件插件的使用详解For ASP.NET

    URL:http://www.cnblogs.com/xiaopin/archive/2010/01/21/1653523.html 今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到 ...

  7. jquery uploadify上传文件插件导致浏览器崩溃问题解决方法

    自谷歌浏览器更新到(版本39.0.2171.99 )后,访问上传文件界面浏览器就崩溃了,而其他的浏览器不会出现问题. 出现这种问题的原因就是谷歌浏览器缓存问题,但将访问该jsp页面路径添加上时间戳后无 ...

  8. jquery上传文件控件Uploadify

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...

  9. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

随机推荐

  1. Javascript、CSS和IMG之网页执行探索

    测试环境:windows/chrome 实例1:页面中仅有图片 <html xmlns="http://www.w3.org/1999/xhtml"> <head ...

  2. LayaAir引擎——(九)

    var h = new Array(); var j = new Array(); var xbCursor = 0; function xbinit() { xbinitName(); xbRect ...

  3. Azure Media Service

    该视频来源于Build 2015, 视频比较老, 从演讲的角度看, 是个非常不错的演讲, 内容也很全面. Apr 27, 2015

  4. 深入理解Javascript中this, prototype, constructor

    在Javascript面向对象编程中经常需要使用到this,prototype和constructor这3个关键字. 1.首先介绍一下this的使用:this表示当前对象;如果在全局中使用this,则 ...

  5. REDIS 字典数据结构

    对于REDIS来讲  其实就是一个字典结构,key ---->value  就是一个典型的字典结构 [当然  对于vaule来讲的话,有不同的内存组织结构 这是后话] 试想一个这样的存储场景: ...

  6. 安装在CloudStack时CentOS6.4中安装MySQL通过mysql_secure_installation方式修改密码

    在安装CloudStack时,通过mysql_secure_installation方式修改密码 01 [root@test ~]# /usr/bin/mysql_secure_installatio ...

  7. 事件委托能够优化js性能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. java问题排查可能用到的一些命令

    1. jmap查询jvm内存使用情况 -heap :打印jvm heap的情况 -histo: 打印jvm heap的直方图.其输出信息包括类名,对象数量,对象占用大小. -histo:live : ...

  9. PHP memcache 安装问题

    第一步:下载  memcached.exe 第二步:c:\window\system32\cmd.exe  管理员启动 第三步: memcached.exe -d start (错误) failed ...

  10. Python数学函数

    1.Python数学函数 1.abs(x):取绝对值,内建函数 2.math.ceil(x):向上取整,在math模块中 3.cmp(x,y):如果 x < y ,返回-1:如果 x == y ...