替换uploadify用Huploadify实现上传图片或文件

简介之前项目用uploadify(flashversion)实现图片上传功能,但是由于chrome浏览器已经屏蔽flash,并且flash的上传插件浏览器兼容性也不够,于是找了Huploadify替代uploadify,原因如下:1、不依赖于flash。2、库文件大小是uploadify的三分之一。3、浏览器兼容性测试,支持ie11、firefox(版本33.1.1)、chrome(版本38.0.21

  

之前项目用uploadify(flash version)实现图片上传功能,但是由于chrome浏览器已经屏蔽flash,并且flash的上传插件浏览器兼容性也不够,于是找了Huploadify替代uploadify,原因如下:

1、不依赖于flash。

2、库文件大小是uploadify的三分之一。

3、浏览器兼容性测试,支持ie11、firefox(版本 33.1.1)、chrome(版本 38.0.2125),移动端支持安卓,iPhone图片上传(其他浏览器没测)。

4、不用改服务端。

一、接下来说下Huploadify的安装:

git下载地址:https://github.com/Double-Lv/Huploadify

考虑到部分朋友无法打开GitHub,直接戳这里下载吧! 替换uploadify用Huploadify实现上传图片或文件Huploadify-master.zip

下载后如下css和js文件在head中引入(jquery.Huploadify.js要在jquery库文件后引入):

Huploadify.css

jquery.Huploadify.js

二、实现上传代码:

html如下

<imgsrc=""alt=""class="cardImg"id="imgid"/><!--预览图片--><divid="fileid"></div><!--图片上传按钮-->

js如下

/**图片上传公共方法*domName图片上传的div的ID*domPic显示上传后图片img的ID,如无图片预览可不设置*/functionuploadInit(domName,domPic){$("#"+domName).Huploadify({auto:true,fileTypeExts:'*.*',multi:false,fileObjName:'Filedata',fileSizeLimit:99999999999,showUploadedPercent:false,buttonText:'上传',uploader:param.uploadurl,onUploadSuccess:function(file,data){varData=JSON.parse(data);if(Data.success==true){$("#"+domPic).attr("src",Data.result);param.uploadsuccess(Data.result);}else{jQuery.longhz.alert(Data.resultDes);}},onUploadError:function(file,response){jQuery.longhz.alert("上传失败!");}});}//调用公共方法uploadInit("fileid","imgid");

三、Huploadify的配置

打开jquery.Huploadify.js能看到Huploadify的完整配置项,如下:

vardefaults={fileTypeExts:'*.*',//允许上传的文件类型,格式'*.jpg;*.doc'uploader:'',//文件提交的地址auto:false,//是否开启自动上传method:'post',//发送请求的方式,get或postmulti:true,//是否允许选择多个文件formData:null,//发送给服务端的参数,格式:{key1:value1,key2:value2}fileObjName:'file',//在后端接受文件的参数名称,如PHP中的$_FILES['file']fileSizeLimit:2048,//允许上传的文件大小,单位KBshowUploadedPercent:true,//是否实时显示上传的百分比,如20%showUploadedSize:false,//是否实时显示已上传的文件大小,如1M/2MbuttonText:'选择文件',//上传按钮上的文字removeTimeout:1000,//上传完成后进度条的消失时间,单位毫秒itemTemplate:itemTemp,//上传队列显示的模板onUploadStart:null,//上传开始时的动作onUploadSuccess:null,//上传成功的动作onUploadComplete:null,//上传完成的动作onUploadError:null,//上传失败的动作onInit:null,//初始化时的动作onCancel:null,//删除掉某个文件后的回调函数,可传入参数fileonClearQueue:null,//清空上传队列后的回调函数,在调用cancel并传入参数*时触发onDestroy:null,//在调用destroy方法时触发 :null,//选择文件后的回调函数,可传入参数fileonQueueComplete:null//队列中的所有文件上传完成后触发}

看注释基本能看懂,不明白的找到相应的方法定义可知方法的使用条件,比如

替换uploadify用Huploadify实现上传图片或文件

onUploadSuccess:在返回状态status为200时触发onUploadError:返回状态status不为200时触发onUploadComplete:在onUploadSuccess或onUploadError触发后触发

下载链接:网站源码/小程序源码/网站模板下载

版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
网站技巧

帝国备份王密码忘记了怎么办?

2024-9-19 19:44:18

网站技巧

手动触发 Lazyload 显示懒加载的图片

2024-9-19 19:44:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索