谈谈jQuery插件uploadify的使用

告诉我使用uploadify的曲折过程：

选择上传的原因是我之前用的是jQuery官网的上传文件插件，使用起来比较困难(页面上写了很多代码，IE下后台返回需要配置格式[不知道其他上传插件是否一样])，一直存在IE9上传不成功的问题，直到离开上一家公司才解决(可能是因为我比较低)。所以我在使用插件之前做了一些研究。Uploadify有两个版本，uploadify用于flash，uploadFive用于html5。文档比较齐全，网上有很多使用示例页面，配置页面也比较简单，所以他是首选。

1.uploadify的flash版第一次免费，根据以往的经验，所有浏览器都支持flash(这是悲剧的开始)，所以计划只使用这个版本。产品效果如下(有三个图片预览框，每个图片都有对应的描述，所以不能用一个上传按钮，每个上传按钮上传对应的图片)

配置完成后Chrome通过了自检(中间有个小转折，产品想一起上传多张图片。当时没有找到IE8显示的处理。后来在网上找到一篇文章，然后录下来预览了一下再上传)。

为了测试每个浏览器的情况，当我看火狐时，我感到头晕。最新版本的火狐没有自带flash插件。结果，文件输入的风格没有改变，完全不起作用。我以前想加入一个dom

对象数据='xxx.swf '高度='0 '宽度=' 0 '/对象

让浏览器检测到一个flash文件弹出，并提示您安装flash。想了想，不行。为了上传文件，用户安装flash太复杂了。

最后决定让支持html5的用uploadify上传，不支持的用uploadify(flash)版本上传。If(window.applicationCache){//支持html5。配置uploadify的过程中有两个问题：1。fileinput元素有一个name属性，但是使用flash后需要手动传递，也就是fileObjName属性，在配置uploadify时也需要传递这个名称。2 .文件大小限制设置文件大小似乎不起作用。最后，我只能验证自己(在onSelect事件中验证)，如果验证失败，我需要取消上传(因为我被配置为“自动”: true用于自动上传)

//swf上传需要在onuploadererror $(' # ' opts . fileobjname)中处理此故障。uploadify(' cancel ')；取消后，您需要在onuploadererror事件中拦截此取消事件，这将导致触发器被视为onuploadererror事件

onUploadError ' :函数(文件，错误代码，错误消息，错误字符串){ if(errorCode！=-280){//取消上传的错误代码为-280 $.dialog.error('上传失败，请重试'，{ txtYes: '我知道' })；}}这是我上传的配置

/*依赖于jQuery和$.dialog opts={ fileobjname : ' idcardsync '，swf : ' uploadify/uploadify。' swf '，显示进度：函数（进度){}，//进度：0-1检查文件：函数（文件){}，正常选择：函数(){}，正常加载：函数(id，data)，position class 3360 ' file-BTN-left '，}*/function init//1024 * 1024 * 5，50M $(' # ' opts。fileobjname ).uploadify({ ' fileSizeLimit ' : maxSize，' multi': false，//每次只能选择一个文件auto': true，/*如果是自动上传，那上传按钮将没用了*/'fileTypeExts': '* .jpg*。bmp*。jpeg*。png '，' fileTypeDesc': '请选择图像或者视频、“文件队列”、“宽度”: 200、“高度”: 140、“按钮文本”:“文件对象名称”: opts。fileObjName 、//需要修改文件名称swf': opts.swf，' uploader ' : '/pcapi/user/uploaduserchangecardiage。htm '，' onSelect ' :函数（文件){ //有名字表示是冲击波闪光格式文件上传，html5文件上传参数请参考http://www .上传。com/documentation/uploadifive/on sele-2/需要检测文件类型和大小if(opts。checkfile(file)){ opts。normalonsele(opts。职位类别)；}else{ //swf上传需要在onuploadererror处理这个失败$("# "选项。fileobjname ).uploadify(' cancel ')；} }，' onUploadProgress ' :函数(文件，字节数，字节数，总字节数，总字节数，总字节数){ opts。显示进度(加载的字节数/总字节数)；}，' onUploadError ' :函数（文件，errorCode，errorMsg，errorString) { if(errorCode！=-280){//取消上传的错误码是-280 $.dialog.error('上传失败，请重试，{ txtYes: '我知道了'});} }，' onUploadSuccess ' :函数（文件，数据){ opts。正常上传(opts。fileobjname，数据);} });}在配置上传视频的时候遇到一个问题：

1 .文件类型扩展设置为"*.jpg*。bmp*。jpeg*。巴布亚新几内亚",但实际上所有的图片格式都可以选择。所以只能在选择图片后自己手动检测格式。而且由于选择时的参数长队没有文件类型信息：点击查看。所以只能在onAddQueueItem事件中检测，然后在选择时中取消上传队列长队来取消文件的自动上传

onAddQueueItem':函数（文件){//html5需要自己检测格式和大小fileCheckResult=opts.checkFile(文件);}、“开启选择”:函数（队列){ if(FileCheckResult){ opts。正常选择。职位类别)；} else { $(“#”opts . fileobjname).uploadifive(' clearQueue ')；} },可能还有一个问题是需要配置文件类型' : '图像/*,因为我直接设置了，不知道不设置会不会有问题，没试

下面是我的上传视频配置

/*取决于jQuery和$。dialog opts={ fileobjname 3360 ' id card positive '，//show progress 3360 function(progress){ }具有相同的名称和id。//progress :0-1 checkfile :函数(文件){}，normalOnSelect:函数(positionClass){}，normalUploaded:函数(id，data)，position class : ' file-BTN-left '，} */function init(opts){ var file checkresult=true；var maxSize=5242880//1024 * 1024 * 5，5m $ ('#' opts.fileobjname)。uploadifive({ ' filesize limit ' : maxsize，' multi' : false，//一次只能选择一个文件' auto': true，/*如果是自动上传的，/*则为*。bmp*.jpeg*.png '，' fileTypeDesc ' : '，请选择图像或视频'，' queue id' :' filequeue '，' width' : 200，' height' 3360 140，' buttontext' : ' '，FileObjname' :OPTS。FileObjname，//需要修改文件名' dnd': false，//不允许拖动' fileType': 'image/*，Uploadscript ' : '/pcapi/user/uploadusercchangedimage . htm '，' onaddqueueitem' :函数(文件){//HTML5需要自行检查格式和大小filecheckresult=opts.checkfile(文件)；}、“on select”:函数(队列){ if(FileCheckResult){ opts . normalonSelect(opts . position class)；}else{ $('#' opts.fileObjName)。uploadifive(' clearQueue ')；} }，' onProgress':函数(文件，e){ opts . show progress(e . loaded/e . total)；}、“on error”:函数(文件、错误代码、错误消息、错误字符串){$。dialog.error('上传失败，请重试'，{ txtYes: '我知道' })；}，' onUploadComplete ' :函数(文件，数据){ opts . normaluploaded(opts . fileobjname，数据)；} });}2.喝了本地测试OK后，放入测试环境进行测试，顿时震惊。遇到的第一个问题是在IE下点击没有反应(文件选择框没有弹出)。搜索了很久，终于找到了原因：文档准备完全后一定要初始化uploadify，确保上传输入可用(不显示：无)。好的，你可以选择文件，但是IE8/9在选择文件后总是抛出一个调用startUpload失败的异常。我上网查了一下，有几个原因。

1).可能是多次上传div或输入(同名或同ID)导致的。如果有两个不同的上传按钮，它们的名称和id应该设置不同。

这不是标签问题，而是可能由多个上传的div或输入(具有相同的名称或ID)引起的。如果有两个不同的上传按钮，它们的名称和标识应该设置不同。

div id='total '输入类型=' file ' name=' total _ upload ' id=' total _ upload ' multiple=' true '/div a href=' JavaScript : $(' # total _ upload ')。uploadify('upload '，' * ')开始上传/a href=' JavaScript 3360 $(' # total _ upload ')。uploadify ('cancel '，' * ')取消全部上传/a2)。flash跨域原因(flash上传不同域的源文件和页面。我的理由是这个。我在服务器的根目录(主域名所在项目的根目录)下使用了crossdomain.xml，但很可惜没有用(可能是因为我们使用的服务器不是Apache服务器，互联网上的童鞋通过这个解决方案解决了这个跨域问题)。最后，我的解决方案是不允许它跨域。我把uploadify资源放在主域名所在项目的根目录下，然后在这个目录下请求uploadify.swf文件。嗯，终于可以上传文件了。

最后上传的问题解决了，费了不少时间。希望以后带uploadify的童鞋少走弯路。