时间：2016-11-15 14:49:33
凡做过网站开发的都应该知道表单file的确鸡肋。
Ajax解决了不刷新页面提交表单，但是却没有解决文件上传不刷新页面，当然也有其它技术让不刷新页面而提交文件，该技术主要是利用隐藏的iFrame，较Ajax要麻烦许多，而且其提交方式依然在底层是使用的表单file，这里我们不详谈。而且如果是提交较小的文件，我们能接受，如果提交的文件较大，我们便要忍受很长的等待时间，而浏览器却没有任何提示，我们也没有办法知道文件上传的进度…
但是现在，网上出现了一个名为SWFUpload的上传组件，该组件利用Flash自身的文件提交技术而无需刷新页面，而且能够获取文件上传进度，可以提交多个文件，而且还能控制上传文件的大小，类型等信息。这么一个强大而易用的东西，你还在寻找么？
下面就是是SWFUupload的简易教程，服务端大同小异，我这里以PHP为例。（该教程基于SWFUpload2.2.0.1，虽然SWFUpload v2.5.0 Beta 3已经放出，但是考虑到是测试版，肯定用不稳定的因素，我决定将稳定的2.2.0.1作为本次学习的版本）。
下载SWFUpload
下载地址：swfupload.googlecode.com/files/SWFUpload%20v2.2.0.1%20Core.zip
下载完后解压到某个目录，我这里放在labs.goodje.com/swfu目录下，该目录可自行修改。
自需要保留目录下的swfupload.js,Flash/swfupload.swf两个文件和plugins目录,其它的都可以删掉。
- swfupload.js: swfupload的js脚本，封装swfupload.swf的各种接口供js调用，简化操作。
- swfupload.swf: swfupload的核心所在，上传多个文件，提供上传进度，限制文件容量尺寸等提优于于上传表单功能的工具，实质是一个flash。
- plugins目录: swfupload的各种插件。其中swfupload.cookies.js用于解决ie中flash请求服务器时，请求头中不带cookie的bug。swfupload.queue.js插件提供更强大的上传队列功能，比如说取消队列等等。 swfupload.speed.js插件提供上传速度，上传剩余时间，以上传事件等信息。 swfupload.swfobject.js插件集成了swfobject库，用于将swfupload组件嵌入到dom中，而且新增了一个swfupload组件正在载入的事件。
快速入门
新增一个上传页面，我们放在swfu下，但不一定非要放在swfu下，命名为tutor-1.html。
head中插入用于引入swfupload.js的代码
- <script src="swfupload.js">script>
然我我们还需要一个swfupload占位符和一个上传按钮。占位符用于当swfupload载入并初始化后被swfupload按钮替换的一个dom元素。
- <div id="swfu-placeholder">div>
- <div><input type="button" onclick="swfu.startUpload();" value="上传" />div>
接着，载入并初始化swfupload.swf。
- var swfuOption = {//swfupload选项
- upload_url : "http://labs.goodje.com/swfu/upload.php", //接收上传的服务端url
- flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
- button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
- file_size_limit : "20480",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
- button_width: 200, //按钮宽度
- button_height: 20, //按钮高度
- button_text: ‘点我选择文件‘//按钮文字
- }
- var swfu = new SWFUpload(swfuOption);//初始化并将swfupload按钮替换swfupload占位符
这样，我们点击“点我选择文件”便可以上传文件了，是不是so easy。[查看demo]
另外我们非常建议在开发的过程中启用debug模式，这个东西非常管用，在swfuOption中添加一个debug:true就可以了。
还有一点要特别注意：如果你的swfupload.swf域名和upload_url目录不在同一个域名下，请在upload_url域名下的根目录下创建一个crossdomain.xml文件，该文件主要是出于安全考虑的设计，目的是防止跨域的请求。该文件内容请参考：Flex中实现跨域web service调用时crossdomain.xml的issue（中文），以及官方资料Adobe Cross Domain Policy FileSpecification（英文）
美化按钮
现在swfupload按钮是不是太丑了，用户肯定不会喜欢的，就连能不能点我觉得用户都会这么想。好吧，那现在我们来美化它把。
一. 加上背景图片。
按钮分别有四种状态：1. 正常情况 2. 鼠标经过 3. 鼠标按下 4. 按钮被禁用。
知道了这四种状态我们就可以开始制作图片了，图片宽度为按钮的宽度，高度为按钮高度的四倍，四种状态的背景图片分别从上至下排列，中间没有缝隙，最终效果可以是这个样子。
- var swfuOption = {//swfupload选项
- upload_url : "http://labs.goodje.com/swfu/upload.php", //接收上传的服务端url
- flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
- button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
- file_size_limit : "20480",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
- button_width: 215, //按钮宽度
- button_height: 45, //按钮高度
- button_text: ‘点我选择文件‘,//按钮文字
- button_image_url: "http://labs.goodje.com/swfu/swfu_bgimg.jpg",//按钮背景图片路径
- debug:true
- }
- var swfu = new SWFUpload(swfuOption);
这里修改了button_width，button_height并且新增了button_image_url参数。
二. 优化按钮文字
swfupload有个好处就是可以将背景图片和文字分离，这个做的比较好，要是换文字不要找设计来弄，直接改代码就行了，另外，文字支持html标签，css控制样式，可以用来修改文字的字体颜色和大小，但是很坑爹的一点就是支持的html和css都不全，无法将文字剧中显示，这个太tm坑爹了。不过好在swf选项提供了button_text_top_padding和button_text_left_padding选项，可以用来控制文字离按钮顶部和左边的距离，灰常蛋疼，因为就算你这次调好了，下次增加或删除了文字、修改了文字大小后都需要再调，调好后效果如下。
再附上代码：
- var swfuOption = {//swfupload选项
- upload_url : "http://labs.goodje.com/swfu/upload.php", //接收上传的服务端url
- flash_url : "http://labs.goodje.com/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
- button_placeholder_id : "swfu-placeholder",//上传按钮占位符的id
- file_size_limit : "20480",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
- button_width: 215, //按钮宽度
- button_height: 45, //按钮高度
- button_text: ‘选择文件‘,//按钮文字
- button_text_style: ‘.btn-txt{color: #666666;font-size:20px;font-family:"微软雅黑"}‘,
- button_text_top_padding: 6,
- button_text_left_padding: 65,
- button_image_url: "http://labs.goodje.com/swfu/swfu_bgimg.jpg",//按钮背景图片路径
- debug:true
- }
- var swfu = new SWFUpload(swfuOption);
这里分别修改了button_text，新增了button_text_style，button_text_top_padding以及button_text_left_padding。
