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

 7997

之前项目用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如下

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

js如下

/*
*图片上传公共方法
*domName  图片上传的div的ID
*domPic  显示上传后图片img的ID,如无图片预览可不设置
*/
function uploadInit(domName,domPic){
    $("#"+domName).Huploadify({
        auto:true,
        fileTypeExts:'*.*',
        multi:false,
        fileObjName:'Filedata',
        fileSizeLimit:99999999999,
        showUploadedPercent:false,
        buttonText:'上传',
        uploader:param.uploadurl,
        onUploadSuccess:function(file,data){
            var Data=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的完整配置项,如下:

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


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


20160516145117135.png


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



本文网址:https://www.zztuku.com/index.php/detail-7718.html
站长图库 - 替换uploadify用Huploadify实现上传图片或文件
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐