一.前言 确定了渐进式增强的上传方式,接下来我们需要将上传功能从具体的业务逻辑中剥离出来,作为公共组件供业务层调用.这就要求我们必须对业务层隐藏上传细节,只暴露统一的上传API.这时候大家是不是跟我一样想到了Facade模式?   二.Facade模式实现文件上传,代码示例: /* 上传组件,IE浏览器默认flash上传,其它浏览器html5 示例: var fileUpload = new FileUpload({ container: document.getElementById("upl…
使用Stream上传文件 文件上传功能是web程序/服务上常用和必须的功能,WCF也不例外.在4.0版本之前,WCF仅仅提供了buffered模式上传文件.从4.0版本之后,WCF开始提供了Streaming模式.在buffered模式中,实体文件需要在WCF服务可以访问之前上传到服务.在Streaming模式中,服务在文件上传完成之前就可以访问了.当你需要通过服务对文件进行处理或者由于文件太大无法将文件进行Buffered的时候,Stream模式就非常有用了. 在本节,我们来看看如何实现和配置…
1.http请求的头信息是“application/octet-stream”,request body 是二进制的flash图片流 2.把流中的信息读入到文件中 代码如下,代码分三个部分: -----------------主程序----------------- import richinfo.tools.Base64Coder; import richinfo.tools.file.FileUtil; public class WriteFlie { /** * @param args *…
最近在项目中中上传图片时,大约有300多K,结果报了个服务器错误,以前从未遇到过,错误的内容如下: mod_fcgid: www.111cn.net HTTP request length 132296 (so far) exceeds MaxRequestLen (131072) 查了下资料,发现fastcgi默认的请求大小为131072,于是在apache配置中添加了MaxRequestLen 配置就好了.如果你只需要修改单个虚拟主机的from:http://www.111cn.net/ph…
HTML: <div> <label for="fileUpload"> 选择文件 </label> <br/> <input id="fileUpload" type="file" multiple="multiple" /> <br /> <input id="btnUploadFile" type="button&…
参考的https://www.cnblogs.com/lvdabao/p/3452858.html这位,在此基础上略有修改: 1.根据Layer,将上传附件做成弹窗显示,引入frame弹窗,在项目当中能够通用 2.附件支持上移,下移排序功能 先贴出上传html页面,JS的代码 <script type="text/javascript"> $(function () { $('#upload').Huploadify({ auto: true, fileTypeExts:…
<input type="file" id="input"  multiple="multiple"> 主要是多了个multiple 属性…
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等.   Flash版本使用方法: 1.加载JS和CSS <script src="jquery/1.7.1/jquery.min.js"…
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5版本付费,所以没必要使用html5进行上传了. 以下为原文: 支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTM…
1.传统文件上传方式 <!-- 文件上传需要的jar --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>co…
Spring1 推出的时候可以说是不小的颠覆了J2EE 的开发,彻底把EJB打败,将J2EE开发进行简化,Spring2 推出以后完美的与多种开源框架与服务器的结合,让你对其拥抱的更紧,Spring变成了一个工具箱,一应俱全,Spring3 推出以后让开发真正的得到简单化,并且Spring3支持REST风格,采用Spring3进行开发,简单的有点过分了. 如果说我在吹嘘,那么1行有效的代码就可以完成B/S模式的文件上传,呵呵.废话少说,先看代码:清单1:springmvc-servlet.xml…
上一篇文章介绍了HTML5版的文件上传插件,相比flash,采用HTML5的新技术无疑可以提升程序的加载速度.但是在目前的情况看来,HTML5的特性支持度不高,插件的可用性范围确实比较窄.例如,我在插件中使用到的新特性有: <input type="file' />标签的multiple属性 File和FileList API XMLHttpRequest2的upload和onprogress FormData 就拿File来讲,IE9都不支持,所以在当前环境下IE系列浏览器几乎无法…
是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他)的上传工作,当然在Html5标准下,还支持文件的断点续传功能,有效解决大文件的Web上传问题! 主要特征 1. 支持HTML5.Flash两种方式(跨域)上传 2. 多文件一起上传 3. HTML5支持断点续传,拖拽等新特性 4. 兼容性好IE7+, FF3.6+, Chrome*,Safari4+…
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery File Uploader.FineUploader.Uploadify.Baidu Web Uploader 等等),功能都很强大,代码量一般也较大.当时心想,就这么个小功能,杀鸡焉用牛刀,用库的话还得熟悉它的用法,有的需要引入额外的库,纯Flash的不考虑,还是动手造个轮子得了,至少造过之后能…
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法——File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的“读…
Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipart/form-data,但是需要修改服务器端可用才能显示给用户文件上传的进度.本质上你需要做的工作是在服务器端接收一个文件时,你发送给它一个字节流,所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器,在这个过程一直在不断的进行文件的上传.这种方式运行的非常好,不像Flash上传那这样充满…
之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用Flash插件实现动画.然并卵,觉得这些东西跟平时用到的有什么关系,因为我从来不需要在网页中嵌入什么视频,音频甚至是动画.这也是对我来说HTML5跟之前的版本没有太大区别的一个原因. HTML5本质上还是HTML语言,简单易用,只是增加了标签(我是这么认为),这个对浏览器厂商的要求,即使再加几个标签…
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演示地址 资料下载   FLASH文件上传和传统的HTML文件上传,能实现多文件上传.大文件上传,和上传前预览. 当然HTML5也能实现上述功能,这里就不多说了,有时间我在做一个实例和大家分享一下. 下面介绍一下 百度图片 基于FLASH文件上传工具截图: MultiFile Upload 上传插件介…
一.什么是SWFUpload? SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式. 目前此项目放在:https://code.google.com/p/swfupload/ 对应的中文API:http://leeon.me/upload/other/swfupload.html 由于SWF…
在使用UEditor富文本时,如果客户端的浏览器是低版本浏览器,如IE7.IE8等,UEditor的文件上传方式将会使用flash方式上传而不是html5,而flash在跨域时唯一的限制策略就是crossdomain.xml文件,该文件限制了flash是否可以跨域读写数据以及允许从什么地方跨域读写数据. 从UEditor官方文档上看,如果使用flash方式上传文件,那么只需要设置如下即可: 但实际在IE7.IE8环境下该文件被正确请求到后仍然无法正确上传文件,而是报出“http请求错误”信息.…
HTML5解决了以往网页编写的一个难题:带有上传进度的文件上传. 本文的代码全部来自http://www.matlus.com/html5-file-upload-with-progress/,如在技术细节上有任何疑问,请以原文为主. 长期以来,开发者们一直为此苦恼,大部分为解决这个问题都采用了flash作为解决方案,但flash并非灵丹妙药,因为flash版本,割据造成的问题有时反倒成为了噩梦.有些网站则采用了form标签的enctype=multipart/form-data属性,但这一属性…
表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,这个可以在浏览器console一下就知道了.我们可以通过append向FormData里面添加各种需要提交的数据. 你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:var…
断点上传能够防止意外情况导致上传一半的文件下次上传时还要从头下载,网上有很多关于断点的实现,这篇文章只是从前到后完整的记录下一个可用的实例,由于生产环境要求不高,而且就是提供给一两个人用,所以我简化了诸多过程,不用flash,也不用applet,只是通过html5的新特性进行浏览器端的处理. 简单说下关键点 如果上次传到n字节,那么浏览器下次续传直接就是从文件的n字节开始向服务器传送数据,而不是都传过去,服务器从n字节开始接收. html5能给文件分片,所以每次上传完一块文件后,应该返回当前已经…
http://www.uploadify.com/documentation/  官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完全支持和html5,但是它是要收费的,所有只能在它基础上自己去写一个插件来完成html5多文件上传. 接下来就是介绍写好了的插件用法,和官方用法是完全一样的,可以去参考官方文档 插件使用之前需要引用js,css <script src="../../Scripts/pagekage/utils…
文章转载自:http://xiechengxiong.com/288.html 一个简单的HTML5多文件上传demo. 以前我们上传文件的时候,如果通过js上传,我们无法在本地直接预览图片,还得跑到服务器回来之后再预览,而且没办法监控进度. 尽管通过flash能够实现本地预览了,而且也能监控进度了,但是始终两个不同的技术平台,相互之间衔接也太麻烦了. HTML5的最新File API于是就带给了我们很多有趣的东西,带来了全新的文件上传体验. 1.多文件 只要的file表单input上加上 mu…
本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释.绝对好用,支持单文件.多文件上传,支持大文件上传,已经过多方面测试,保证好用. 以下附上Uploadify部分常用的参数介绍,要看全部的就去看其API文件了,一般在下载的包里都有.  uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf.   script :…
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta charset="utf-8"> <meta name="viewport&…
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可能实现的,因为浏览器的原因,AJAX根本获取不了文件信息,当然这里并不是说就不能文件上传了,只是说在AJAX2.0之前所谓的AJAX文件上传都是假冒的,核心更本没有用AJAX,而是利用iframe实现的,下面我们来看看如何利用iframe实现页面无刷新上传文件. iframe无刷新上传文件版. ht…
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示…
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件上传进度条,矢量在<矢量Chart图表嵌入HTML5网络拓扑图的应用>一文中已经讲述了关于setCompType()方法的应用,今天我们用setImage()方法充分利用系统中定义好的矢量资源来实现文件上传进度条,我们先来看下效果图: 从效果图可以看到,向服务器上传了一个mp4文件,并在最下方显示…