ASP.NET MVC5+EF6+EasyUI 后台管理系统(32)-swfupload多文件上传[附源码]

文件上传这东西说到底有时候很痛,原来的asp.net服务器控件提供了很简单的上传,但是有回传,还没有进度条提示。这次我们演示利用swfupload多文件上传,项目上文件上传是比不可少的,大家这个心里都知道。主要提供给源码说明及下载

最终效果图:

SWFUpload的特点:

1、用flash进行上传,页面无刷新,且可自定义Flash按钮的样式;

2、可以在浏览器端就对要上传的文件进行限制;

3、允许一次上传多个文件,但会有一个上传队列,队列里文件的上传是逐个进行的,服务器端接收文件时跟普通的表单上传文件是一样的;

4、提供了丰富的事件接口供开发者使用;

SWFUpload的文件上传流程是这样的:

1、引入相应的js文件

2、实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置。

3、点击SWFUpload提供的Flash按钮,弹出文件选取窗口选择要上传的文件;

4、文件选取完成后符合规定的文件会被添加到上传的队列里;

5、调用startUpload方法让队列里文件开始上传;

6、文件上传过程中会触发相应的事件,开发者利用这些事件来更新ui、处理错误、发出提示等等;

SWFUpload包括三部分的内容:SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。所以首先在页面引入SWFUpload.js

其实实现一个文件上传是很简单的,但是要实现一个继承了可配置有水印有缩略图的图片上传功能还是非常繁琐的.

配置参数对象中的常用属性及说明

属性

类型

默认值

描述

upload_url

String

处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址

preserve_relative_urls

Boolean

false

如果为false则SWFUpload会把swfupload.swf用到的相对地址转换为绝对地址,以达到更好的兼容性

file_post_name

String

Filedata

相当于用普通的文件域上传文件时的name属性,服务器端接收页面通过该名称来获取上传的文件

post_params

Object(直接量)

一个对象直接量,里面的键/值对会随着每一个文件一起上传,文件上传要附加一些信息时很有用

use_query_string

Boolean

false

为false时,post_params属性定义的参数会以post方式上传;为true时,则会以get方式上传(即参数会以查询字符串的形式附加到url后面)

file_types

String

该属性指定了允许上传的文件类型,当有多个类型时使用分号隔开,比如:*.jpg;*.png ,允许所有类型时请使用 *.*

file_types_description

String

指定在文件选取窗口中显示的文件类型描述,起一个提示和说明的作用吧

file_size_limit

String

指定要上传的文件的最大体积,可以带单位,合法的单位有:B、KB、MB、GB,如果省略了单位,则默认为KB。该属性为0时,表示不限制文件的大小。

file_upload_limit

Number

指定最多能上传多少个文件,当上传成功的文件数量达到了这个最大值后,就不能再上传文件了,也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。

file_queue_limit

Number

指定文件上传队列里最多能同时存放多少个文件。当超过了这个数目后只有当队列里有文件上传成功、上传出错或被取消上传后,等同数量的其他文件才可以被添加进来。当file_upload_limit的数值或者剩余的能上传的文件数量小于file_queue_limit时,则取那个更小的值

flash_url

String

swfupload.swf文件的绝对或相对地址,相对地址是指相对于当前的页面地址。实例化swfupload后,就不能再改变该属性的值了。

prevent_swf_caching

Boolean

为true时会加一个随机数在swfupload.swf地址的后面,以阻止flash影片被缓存,这是为了防止某些版本的IE浏览器在读取缓存的falsh影片时出现的bug

button_placeholder_id

String

指定一个dom元素的id,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符

button_placeholder

DOMElement

指定一个dom元素,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符。当button_placeholder_id与button_placeholder都存在时,以button_placeholder_id为优先

button_image_url

String

指定Flash按钮的背景图片,相对地址或绝对地址都可以。该地址会受到preserve_relative_urls属性的影响,遵从与upload_url一样的规则。该背景图片必须是一个sprite图片,从上到下包含了Flash按钮的正常、鼠标悬停、按下、禁用这四种状态。因此该图片的高度应该是Flash按钮高度的四倍

button_width

Number

指定Flash按钮的宽度

button_height

Number

指定Flash按钮的高度,应该为button_image_url所指定的按钮背景图片高度的1/4

button_text

String

指定Flash按钮上的文字,也可以是html代码

button_text_style

String

Flash按钮上的文字的样式,使用方法见示例

button_text_top_padding

Number

指定Flash按钮顶部的内边距,可使用负值

button_text_left_padding

Number

指定Flash按钮左边的内边距,可使用负值

button_disabled

Boolean

false

为true时Flash按钮将变为禁用状态,点击也不会触发任何行为

button_cursor

指定鼠标悬停在Flash按钮上时的光标样式,可用值为SWFUpload.CURSOR里定义的常量

button_window_mode

指定Flash按钮的WMODE属性,可用值为SWFUpload.WINDOW_MODE里定义的常量

file_dialog_start_handler

Function

fileDialogStart事件侦听函数

file_queued_handler

Function

fileQueued事件侦听函数

file_queue_error_handler

Function

fileQueueError事件侦听函数

file_dialog_complete_handler

Function

fileDialogComplete事件侦听函数

upload_start_handler

Function

uploadStart事件侦听函数

upload_progress_handler

Function

uploadProgress事件侦听函数

upload_error_handler

Function

uploadError事件侦听函数

upload_success_handler

Function

uploadSuccess事件侦听函数

upload_complete_handler

Function

uploadComplete事件侦听函数

源码说明:

 public class siteconfig
    { 
        public int attachfilesize{ get; set;}//附件文件大小
        public int attachimgsize { get; set; }//附件图片大小
        public int attachimgmaxheight{ get; set;}//附件图片最大高度
        public int attachimgmaxwidth { get; set; }//附件图片最大宽度
        public int thumbnailwidth { get; set; }//缩略图宽度
        public int thumbnailheight { get; set; }//缩略图宽度
        public int watermarktype { get; set; }//水印类型1文件2图片
        public string watermarktext { get; set; }//水印文字
        public int watermarkimgquality { get; set; }//水印质量
        public string watermarkpic { get; set; }//水印图片名称
        public string webpath { get; set; }//web目录
        public string attachpath { get; set; }//上传文件夹
        public int watermarkposition { get;set;}//水印位置
        public string watermarkfont { get; set; }//水印字体
        public int watermarkfontsize { get; set; }//水印字体大小
        public int watermarktransparency { get; set; }//透明度
        public int attachsave { get; set; }//保存的类型按年月/日存入不同的文件夹/按年月日每天一个文件夹
        public string attachextension { get; set; }//允许的扩展名
    }

下载例子源码 VS2012+MVC4

 https://yunpan.cn/cZVeSJ33XSHKZ  提取码 0fc2

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

jQuery EasyUI 详解

easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。

56610
来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

38370
来自专栏数据小魔方

动态图表8|组合框(offset函数)

今天跟大家分享动态图表8——组合框(offset函数)! 步骤: 使用组合框制作下拉菜单 使用offset函数制作动态数据源 利用动态数据源制作图表 1、组合框...

39260
来自专栏积累沉淀

JavaScript BOM浏览器对象模型

BOM  1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少...

25160
来自专栏超然的博客

前端基础精简总结

ES5: String、Number、Boolean、Null、Undefined、Object ES6增: Symbol 其中,object为引用,其...

20140
来自专栏老九学堂

超详细的Web 前端知识体系,等你来挑战!

作为苦逼的IT行业,没日没夜的加班,妹纸也少的可怜,就算在一个班办公室或者一个部门,可能也只有一个妹纸,但估计也轮不到你来上,只能眼巴巴的放着光。可是程序猿一直...

41970
来自专栏web开发

移动端图片放大滑动查看-插件photoswipe的使用

最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的...

98650
来自专栏听雨堂

电子签名实现的思路、困难及解决方案

        在办公自动化的流程中希望实现电子签名。         思路:             1、图片的存放:安全起见存放在库中为宜。最好不能被轻易下...

26950
来自专栏前端说吧

小程序学习笔记

52250
来自专栏coder修行路

python爬虫从入门到放弃(八)之 Selenium库的使用

一、什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium R...

82170

扫码关注云+社区

领取腾讯云代金券