uploadifive源码学习 - BigNerd - 博客园
Uploadify是一个基于JQuery的多文件上传JS组件，高度定制，两个版本可供选择。flash版本在最新的Safari等不再支持flash的浏览器或者一些手机浏览器中就无法正常的加载使用，因此推荐使用html5版本！
最近，想了解JavaScript的编码规范，所以根据用过的Uploadifive作为参考，看如何组织js代码以及如果开发jquery的扩展。
二、代码结构概览
如果从第一行开始读代码，会摸不着头脑，所以先看一下他的整体布局。
(function($) {
var methods = {
//所有上传用到的方法和属性
init:function(options){},
debug : function() {},
clearQueue : function() {}//清理队列
cancel : fucntion(file, fast){},//取消文件上传
upload : function(file, keepVars) {}，
destroy : function() {}，
$.fn.uploadifive = function(method) {
if (methods[method]) {
return methods[method].apply(this,Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
$.error('The method ' + method + ' does not exist in $.uploadify');
})(jQuery);
1.$.extend为类级别的扩展，如：
$.extend({
req:function(url){return true}
$.req('xxxx')
2.$.fn.extend为对象级别的扩展，如：
$.fn.extend({
validate:function(){return true}
$(&#id&).validate();
3.call与apply通常用于动态改变this,调用其他对象的方法，区别在于call参数逐个传递，apply将所有参数放入数组(arguments)行传递
1.首先扩展中对传入的method参数进行判断，如果存在这个方法就直接调用相应的methods对象中的方法，否则如果是个对象，就调用methods的init初始化方法。
2.init 方法
var $this = $(this);//当前被绑定的input的context object
$this.data('uploadifive', {
// 这里初始化的是文件上传队列、多文件上传、文件数量等记录用的
//暂存uploadifive 并保存在$data中
var $data = $this.data('uploadifive');
//将用户绑定上传组件传入的参数与默认的参数进行合并
var settings = $data.settings = $.extend({},options);
//计算用户传入的配置参数fileSizeLimit
if (isNaN(settings.fileSizeLimit)) {
//如果有kb等单位，这里根据用户输入的是KB MB GB进行文件大小计算
//否则以kb为单位
settings.fileSizeLimit = settings.fileSizeLimit * 1024;
//创建type为file的input模板保存为$data的一个属性，这个模板会在后面取代用户页面原有的input 作为一个可点击的透明层存在
$data.inputTemplate = $('&input type=&file&&')
'font-size' : settings.height + 'px',
'opacity'
'position'
: 'absolute',
'right'
: '-3px',
'top'
: '-3px',
'z-index'
//接下来初始化一系列方法绑定到$data上
//创建一个新的input 会用到上面的inputTemplate
$data.createInput = function(){...}
//清除一input
$data.destroyInput = function(){...}
//拖动上传方法
$data.drop = function(e) {...}
//检查文件在队列中是否存在方法
$data.fileExistsInQueue = function(file) {...}
//删除队列中一个已经存在文件
$data.removeExistingFile = function(file) {...}
//接下来初始化创建itemTemplate模板，这个模板就是开始上传时，会有一个进度
条以及一个x点击取消按钮，保存至$data.queueItem中
if (settings.itemTemplate == false) {
$data.queueItem = $('模板div代码');
$data.queueItem = $(settings.itemTemplate);
//添加文件到文件队列中的方法初始化
$data.addQueueItem = function(file) {...}
//上传队列中移除其中一个,多文件上传时候用到
$data.removeQueueItem = function(file, instant, delay) {...}
//计算待上传文件的数量方法
$data.filesToUpload = function() {...}
//检查文件是否存在的方法
$data.checkExists = function(file){...}
//真正实现文件流上传的方法
$data.uploadFile = function(file, uploadAll) {...}
//更新文件上传进度的方法
$data.progress = function(e, file) {...}
//错误信息触发
$data.error = function(errorType, file, uploadAll) {}
//文件上传完成后触发的方法
$data.uploadComplete = function(e, file, uploadAll) {}
//全部文件上传完成触发的方法
$data.queueComplete = function() {}
截止到现在，上面的代码都是方法的定义，模板的定义全部保存在$data中，页面中还没有任何的效果，接下来开始执行一些列跟页面文件上传展现相关初始化操作。
//判断是否支持HTML5
if (window.File && window.FileList && window.Blob && (window.FileReader || window.FormData)) {
下面这部分的操作就是创建一个按钮，设置基本的按钮的样式，如果用户传入了自定 义的设置参数，则相应的赋值。按钮其实是在透明的input file上的一个div
settings.id = 'uploadifive-' + $this.attr('id');
// Wrap the file input in a div with overflow set to hidden
$data.button = $('&div id=&' + settings.id + '& class=&uploadifive-button&&' + settings.buttonText + '&/div&');
if (settings.buttonClass) $data.button.addClass(settings.buttonClass);
// Style the button wrapper
$data.button.css({
'height'
: settings.height,
'line-height' : settings.height + 'px',
'overflow'
: 'hidden',
'position'
: 'relative',
'text-align'
: 'center',
'width'
: settings.width
// Insert the button above the file input
$this.before($data.button)
// Add the file input to the button
.appendTo($data.button) //将原有的input type=file 插入到div中并display none
// Modify the styles of the file input
到现在按钮可以显示在页面上了，但是上传的操作还没有初始化、绑定。接下来调用上面已经初始化好的createInput方法，创建一个新的input type file以便添加用户的一些配置信息，如允许的文件类型，是否多文件上传等。
$data.createInput.call($this);
createInput方法内容：
$data.createInput = function() {
//获取之前初始化好的保存在$data中的input type file模板
var input = $data.inputTemplate.clone();
//设置input name multip accept等属性
//对创建的input绑定change事件
input.bind('change', function() {
//初始化队列记录参数
//判断是否超过了设置的上传队列数量限制，超过了则回调报错，否则进行添加入队列处理
if(超过了限制){
onError();
//遍历files逐个添加到上传队列
for (var n = 0; n & limit; n++) {
file = this.files[n];
$data.addQueueItem(file);
$data.inputs[inputName] = this;
$data.createInput();//重新创建input并绑定change事件
//将绑定好事件的input插入到之前创建的button 就是div层里面
$data.button.append(input);
然后代码回到$data.createInput.call($this);的调用位置接着往下走，可以看到有一个是否设置了queueID的判断，就是如果设置了queueID就直接创建一个div容器，这里面就是上传时，上传状态进度等信息出现的地方，如果没有，则默认在上传按钮下面创建一个有默认id和class的容器，暂时保存在$data.queueEl中。
if (!settings.queueID) {
settings.queueID = settings.id + '-queue';
$data.queueEl = $('&div id=&' + settings.queueID + '& class=&uploadifive-queue& /&');
$data.button.after($data.queueEl);
$data.queueEl = $('#' + settings.queueID);
uploadifive还支持拖动上传，下面的代码是绑定拖动上传的监听事件
if (settings.dnd) {
//dragleave
//dragenter
//dragover
初始化操作已经完成，等待上传的触发！
当点击选择图片-&选择一个文件-&确定上传，则触发了createInput中绑定的change事件，这里是一个过渡，只是做了队列文件数量的验证，然后遍历文件对象调用$data.addQueueItem(file).
addQueueItem，添加file对象到队列中，事实上多文件上传是html5支持的，所以并不是uploadifive的特性。这个方法完成的事情包括：
判断队列中是否有重复文件，有则移除重复
创建上传进度信息显示，并绑定取消上传的点击事件
file.queueItem.data('file', file); 暂存文件流，在后面真正的文件上传时候要获取文件流
if(onAddQueueItem方法 没有被覆盖){
完成上面所述的1,2,3操作
//如果用户绑定时有onAddQueueItem则触发回调
//文件大小判断
执行完暂存的加入队列的操作，回到createInput的绑定change事件内继续执行,如果配置了自动上传，调用upload方法。
if (settings.auto) {
methods.upload.call($this);
下面进入upload方法。upload方法首先拿到所有uploadifive的配置信息，然后判断是否直接传入了file文件流，是则调用真正的上传方法uploadFile
if (file) {
$data.uploadFile.call($this, file);
if(没有超过上传文件文件数量限制){
//循环上传队列中没有错误和没有完成的文件
$('#' + settings.queueID).find('.uploadifive-queue-item').not('.error, .complete').each(function() {
* $(this)代表的是当前的上传队列的对象，而在addQueeuItem中 有
* 这样一句 file.queueItem.data('file', file);就是缓存了数据
* 所以这里可以直接访问到暂存数据
_file = $(this).data('file');
// Check if the simUpload limit was reached
//是否配置有重复文件检查脚本链接checkScript参数，则check,否则调用真正的uploadFile方法
if (settings.checkScript) {
_file.checking = true;
skipFile = $data.checkExists(_file);
_file.checking = false;
if (!skipFile) {
$data.uploadFile(_file, true);
$data.uploadFile(_file, true);
if (队列中文件都上传完成) {
$data.queueComplete();
uploadFile中使用了两种上传方式，如果支持FormData则使用异步的ajax方式上传，否则使用FileReader以二进制流的方式上传。这种文件上传的方式还是值得学习一下的。
//创建XMLHttpRequest对象
xhr = file.xhr = new XMLHttpRequest();
if(支持FormData){
//创建表单
xhr.open(settings.method, settings.uploadScript, true);
// On progress function
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
//调用progress方法，progress方法就是计算上传完成百分比
$data.progress(e, file);
}, false);
//以二进制流方法上传
var reader = new FileReader();
最后上传完成调用queueComplete方法，整个流程走完了。
简化版的执行流程是：
绑定input，定制参数-&初始化上传方法、属性-&createInput创建上传按钮-&绑定change事件-&文件上传触发change-&文件天加到队列调用addQueueItem-&上传调用upload-&upload必要验证后调用真正的上传方法uploadFile-&上传过程中调用progress计算进度-&上传完成调用queueComplete方法.
附粗陋流程图：JQuery上传插件Uploadify并传参数（一） -
- ITeye技术网站
Uploadify是JQuery的一个上传插件，实现的效果非常不错，进度显示或者速度显示都可以!
同时。。我已经使用最新版写了个。大家可以看这么的这个。。
文章: JQuery上传插件Uploadify并传参数（二）
也可以去看看官网上面的 dome
下载包...API
下面是我开发过程遇到的一些问题总结：
1、上传失败 IO ERROR
------测试是否是 servlet 等配置或者关注flash的版本
2、前台传参中文乱码
-----------这个要根据应用服务器不同可能不同吧...反正只要我们的 界面、界面传参以及后台接收的编码设置一致应该就没上面问题..反正这个问题好解决的...
3、批量上传的时候，只有第一个附件上传的时候可以接收到前台传来的name参数，而后面的参数都为null-------设置'simUploadLimit' : 1, // 一次同步上传的文件数目为 1，问题解决...当初这个问题可是难了我好久！fuck
嘿嘿....下面我贴出代码
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/ charset=UTF-8" %&
String path = request.getContextPath();
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&QQ:
妞见妞爱&/title&
&meta http-equiv="pragma" content="no-cache"&
&meta http-equiv="cache-control" content="no-cache"&
&meta http-equiv="expires" content="0"&
&link href="js/uploadify.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript" src="js/jquery-1.3.2.min.js"&&/script&
&script type="text/javascript" src="js/swfobject.js"&&/script&
&script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"&&/script&
&script type="text/javascript"&
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader'
: 'js/uploadify.swf',
: 'scripts/uploadify',//servlet的路径或者.jsp 这是访问servlet 'scripts/uploadif'
//如果要传参数，就必须改为GET
'cancelImg'
: 'js/cancel.png',
: 'uploads', //要上传到的服务器路径，
: 'fileQueue',
: false, //选定文件后是否自动上传，默认false
: true, //是否允许同时上传多文件，默认false
'simUploadLimit' : 1, //一次同步上传的文件数目
'sizeLimit'
: , //设置单个文件大小限制，单位为byte
'queueSizeLimit' : 5, //限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。
'fileDesc'
: '支持格式:jpg或gif', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
: '*.*.gif',//允许的格式
'scriptData'
:{'name':$('#name').val()}, // 多个参数用逗号隔开 'name':$('#name').val(),'num':$('#num').val(),'ttl':$('#ttl').val()
　onComplete: function (event, queueID, fileObj, response, data) {
var value =
alert("文件:" + fileObj.name + "上传成功");
　onError: function(event, queueID, fileObj) {
　 alert("文件:" + fileObj.name + "上传失败");
　onCancel: function(event, queueID, fileObj){
　 alert("取消了" + fileObj.name);
function uploasFile(){
var name=document.getElementById("name").
if(name.replace(/\s/g,'') == ''){
alert("名称不能为空！");
//设置 scriptData 的参数
$('#uploadify').uploadifySettings('scriptData',{'name':$('#name').val()});
jQuery('#uploadify').uploadifyUpload()
名称:&input type="text" id="name" name="name" value="妞见妞爱" &
&div id="fileQueue"&&/div&
&input type="file" name="uploadify" id="uploadify" /&
&a href="javascript:uploasFile()"&开始上传&/a&&
&a href="javascript:jQuery('#uploadify').uploadifyClearQueue()"&取消所有上传&/a&
Uploadify.java
import java.io.BufferedInputS
import java.io.BufferedOutputS
import java.io.F
import java.io.FileOutputS
import java.io.IOE
import java.text.SimpleDateF
import java.util.D
import java.util.I
import java.util.L
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import mons.fileupload.FileI
import mons.fileupload.FileUploadE
import mons.fileupload.disk.DiskFileItemF
import mons.fileupload.servlet.ServletFileU
import mons.fileupload.util.S
public class Uploadify extends HttpServlet {
private static final long serialVersionUID = 1L;
* 实现多文件的同时上传
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//设置接收的编码格式
request.setCharacterEncoding("UTF-8");
Date date = new Date();//获取当前时间
SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");
SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");
String newfileName = sdfFileName.format(date);//文件名称
String fileRealPath = "";//文件存放真实地址
String fileRealResistPath = "";//文件存放真实相对路径
界面编码 必须 和request 保存一致..否则乱码
String name = request.getParameter("name");
String firstFileName="";
// 获得容器中上传文件夹所在的物理路径
String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + newfileName +"\\";
System.out.println("路径" + savePath);
File file = new File(savePath);
if (!file.isDirectory()) {
file.mkdir();
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("UTF-8");
// 获取多个上传文件
List fileList = fileList = upload.parseRequest(request);
// 遍历上传文件写入磁盘
Iterator it = fileList.iterator();
while (it.hasNext()) {
FileItem item = (FileItem) it.next();
// 如果item是文件上传表单域
// 获得文件名及路径
String fileName = item.getName();
if (fileName != null) {
firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);
String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名
fileRealPath = savePath + newfileName+ formatN//文件存放真实地址
BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流
BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流
Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹
//上传成功，则插入数据库
if (new File(fileRealPath).exists()) {
//虚拟路径赋值
fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);
//保存到数据库
System.out.println("保存到数据库:");
System.out.println("name:"+name);
System.out.println("虚拟路径:"+fileRealResistPath);
} catch (FileUploadException ex) {
ex.printStackTrace();
System.out.println("没有上传文件");
response.getWriter().write("1");
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
&servlet-name&Uploadify&/servlet-name&
&servlet-class&com.Uploadify&/servlet-class&
&/servlet&
&servlet-mapping&
&servlet-name&Uploadify&/servlet-name&
&url-pattern&/scripts/uploadify&/url-pattern&
&/servlet-mapping&
效果图片看及 dome 见附件~~~~~~~~~~~
我也是根据 dada_fangfang 大哥
文章改进来的....
这边有 struts 和 springmvc 的写法...但是..他那边就纯粹的上传文件...如果还需要传参数的话！
我的这篇就 希望对大家有所帮助！
下载次数: 876
浏览 18631
yangpanwww
浏览: 406120 次
来自: 杭州
uploadifySettings is not a func ...
qq_ 写道我下载部署运行后提示:1、T ...
我下载部署运行后提示:1、TypeError: word.sa ...
jpg转换bmp后
jpg文件没发删除呢
搞起手机开发了？说说自己使用uploadify的一波三折的曲折过程：
　　之所以要选择uploadify，是源于自己先前使用过jQuery官网的上传文件插件，比较难用（页面写的代码比较多，IE下后台回传需要配置格式【不清楚其他上传插件是否也是这样】），而且一直有IE9上传不成功的问题，到我离开上家公司的时候也一直没有解决这个问题（可能是本人比较low的原因吧）。所以在使用插件之前先调研了一下。uploadify提供两个版本，flash的uploadify和html5的uploadFive。文档还是比较齐全的，网上的使用例子页比较多，配置页比较简单，所以第一选择就是他了。
　　uploadify的flash版本免费，而且根据以往的经验所有浏览器都支持flash的（这是悲剧的开始），所以计划只使用这个版本就行。
　　产品给的效果如下（有三个图片预览框，每一张图片有对应的描述，所以不能用一个上传按钮，每一个上传按钮上传对应的图片）
　　配置完毕后chrome自测通过（中间有个小曲折，产品那边想要多张图片一起上传，当时没有找到IE8展示的处理。后面再网上找到了一篇，然后录了下来）。
　　要测试各个浏览器的情况，在Firefox上一看，我晕，Firefox最新的版本根本没有自带flash插件，结果就是连file input的样式都没有更改，完全没有作用。先前是想加入一段dom
&object data="xxx.swf"
height="0" width="0"&&/object&
　　让浏览器检测到有flash文件弹出安装flash的提示。后来想一想不行啊，为了上传个文件让用户去装flash，太复杂了。
　　最后决定判断让支持html5的使用uploadiFive上传，不支持的才使用uploadify（flash）版本上传。
if(window.applicationCache){//支持html5
在配置uploadify的过程中遇到两个问题：
　　1.file input元素是有name属性的，但是使用flash后需要手动传递过去，也就是fileObjName这个属性,配置uploadiFive也需要传递这个name。
　　2.fileSizeLimit设置文件大小貌似没有起到作用。最后只能自己验证（onSelect事件中验证），验证失败也需要自己处理取消上传（因为我是配置了自动上传的'auto': true）
//swf上传需要在onUploadError处理这个失败
$('#' + opts.fileObjName).uploadify('cancel');
　　执行取消后还需要在onUploadError事件中截取这个取消事件导致触发视为onUploadError事件
'onUploadError': function(file, errorCode, errorMsg, errorString) {
if(errorCode != -280){//取消上传的错误码是-280
$.dialog.error('上传失败，请重试',{txtYes: '我知道了'});
　　下面是我的uploadify的配置
依赖于jQuery和$.dialog
fileObjName:'idCardPositive',
swf: 'uploadify/uploadify.swf',
showProgress: function(progress){},//progress:0-1
checkFile: function(file){},
normalOnSelect: function(){},
normalUploaded: function(id,data),
positionClass: 'file-btn-left',
function init(opts){
var maxSize = 5242880;//1024 * 1024 * 5,5M
$('#' + opts.fileObjName).uploadify({
'fileSizeLimit ': maxSize,
'multi': false,//每次只能选择一个文件
'auto': true,/*如果是自动上传,那上传按钮将没用了*/
'fileTypeExts': '*.*.*.*.png',
'fileTypeDesc': '请选择图像或者视频',
'queueID': 'fileQueue',
'width': 200,
'height': 140,
'buttonText': '',
'fileObjName': opts.fileObjName,//需要修改文件名称
'swf': opts.swf,
'uploader': '/pcapi/user/uploadUserChangeCardImage.htm',
'onSelect' : function(file) {
//有name表示是swf格式文件上传，html5文件上传参数请参考/documentation/uploadifive/onselect-2/
//需要检测文件类型和大小
if(opts.checkFile(file)){
opts.normalOnSelect(opts.positionClass);
//swf上传需要在onUploadError处理这个失败
$('#' + opts.fileObjName).uploadify('cancel');
'onUploadProgress': function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
opts.showProgress(bytesUploaded/bytesTotal);
'onUploadError': function(file, errorCode, errorMsg, errorString) {
if(errorCode != -280){//取消上传的错误码是-280
$.dialog.error('上传失败，请重试',{txtYes: '我知道了'});
'onUploadSuccess': function(file, data) {
opts.normalUploaded(opts.fileObjName,data);
在配置uploadiFive的时候遇到一个问题：
　　1.fileTypeExts设置为&*.*.*.*.png&，但实际上所有的图片格式都可以选择。所以只能在选择图片后自己手动检测格式。而且由于onSelect的参数queue没有文件类型信息：。所以只能在onAddQueueItem事件中检测，然后在onSelect中取消上传队列queue来取消文件的自动上传
'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
fileCheckResult = opts.checkFile(file);
'onSelect' : function(queue) {
if(fileCheckResult){
opts.normalOnSelect(opts.positionClass);
$('#' + opts.fileObjName).uploadifive('clearQueue');
　　可能还有一个问题是需要配置'fileType': 'image/*',因为我直接设置了，不知道不设置会不会有问题，没试
　　下面是我的uploadiFive配置
依赖于jQuery和$.dialog
fileObjName:'idCardPositive',//name和id相同
showProgress: function(progress){},//progress:0-1
checkFile: function(file){},
normalOnSelect: function(positionClass){},
normalUploaded: function(id,data),
positionClass: 'file-btn-left',
function init(opts){
var fileCheckResult = true;
var maxSize = 5242880;//1024 * 1024 * 5,5M
$('#' + opts.fileObjName).uploadifive({
'fileSizeLimit ': maxSize,
'multi': false,//每次只能选择一个文件
'auto': true,/*如果是自动上传,那上传按钮将没用了*/
'fileTypeExts': '*.*.*.*.png',
'fileTypeDesc': '请选择图像或者视频',
'queueID': 'fileQueue',
'width': 200,
'height': 140,
'buttonText': '',
'fileObjName': opts.fileObjName,//需要修改文件名称
'dnd': false,//不允许拖拽
'fileType': 'image/*',
'uploadScript': '/pcapi/user/uploadUserChangeCardImage.htm',
'onAddQueueItem': function(file) {//html5需要自己检测格式和大小
fileCheckResult = opts.checkFile(file);
'onSelect' : function(queue) {
if(fileCheckResult){
opts.normalOnSelect(opts.positionClass);
$('#' + opts.fileObjName).uploadifive('clearQueue');
'onProgress': function(file, e) {
opts.showProgress(e.loaded / e.total);
'onError': function(file, errorCode, errorMsg, errorString) {
$.dialog.error('上传失败，请重试',{txtYes: '我知道了'});
'onUploadComplete': function(file, data) {
opts.normalUploaded(opts.fileObjName,data);
2.当头棒喝
　　本地测试OK以后，放到测试环境上去测试，马上被震惊了。
　　遇到的第一个问题就是在IE下很多时候点击没有反应（没有弹出文件选择框），找了半天原因终于找到了：必须在文档准备完全的时候再去初始化uploadify，而且确保上传input是可用的（非display：none）
　　好了，可以选择文件了，但是选择文件以后IE8/9总是抛出异常，去网上查了一下，主要有几个原因
　　1.而是可能有多个上传的div或者input（含有相同的name或者ID）导致的，如果有两个不同的上传按钮，那么他们的name,id要设置得不一样。
　　2.flash跨域导致（flash上传源码文件和页面所在的域不同【静态资源现在统一放在服务器下】）。我的原因是这个，我按照网上说的使用在服务器的根目录（主域名所在工程的根目录）下防止了crossdomain.xml，但是很遗憾没有管用（可能因为我们使用的服务器不是Apache服务器吧，网上有童鞋通过这个方案解决了这个跨域问题）。最终我的解决方案是不让其跨域，我将uploadify资源放在了主域名所在工程的根目录下，然后请求这个目录下的uploadify.swf文件。好了，最终终于能够上传文件了。
&　　最终是解决了上传的问题，花费的时间也不少，记录下来，希望后面有用uploadify的童鞋能够少走一些弯路。
　　如果觉得本文不错，请点击右下方【推荐】！
阅读(...) 评论()