HHuploadify（基于Huploadify）的文件上传插件

整  理：雷  媛
时  间：2016-02-05
说  明： 上传图片的插件

一、简介

基于Huploadify（基于uploadify）的图片上传插件，自动上传，上传进度条，上传后预览

 二、安装

获取代码：下载HHuploadify的源代码。

网页中引入jquery和css

<script src="jquery-2.2.0.min.js"></script>
<script src="jquery.HHuploadify.js"></script>
<link rel="stylesheet" href="HHuploadify.css"> 
备注：可以在HHuploadify.css中对HHuploadify的样式进行修改。

三、使用方法：

 3.1  上传多张（一组）图片

demo：
<div id="upload"></div>
<script>
 $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',//允许上传的文件类型
        uploader:'sub/upload_sub.php' // 必须的，必须指定用来处理上传逻辑的后端处理URL
    });
</script>
点击按钮之后可以多选多张图片，每张图片会各自提交到upload_sub.php。这里提示一下，uploadify本身就是一张一张图片提交的，而不是所有图片一起提交。upload_sub .php可以是你自己的URL，在这个URL进行图片处理和保存，并且返回一个包含url字段的json字符串，通过这个url字段让上传区域展示图片。

3.2  单张图片上传

在上面的代码中，只需要加入一个isSingle参数即可：
demo：
<div id="upload"></div>
<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        isSingle:true,
        uploader:'sub/upload_sub.php '// 必须的，必须指定用来处理上传逻辑的后端处理URL
    });
</script>
多张图片上传的时候，无论你上传了多少张图片，末尾都会存在选择图片的按钮，你还可以继续上传。而单张图片上传时，选择图片时只能选择一张，选择好之后就进入上传状态，按钮消失，不能继续选择图片进行上传。
四、初始化参数
js中默认的参数如下所示：
fileTypeExts:'*.*',//允许上传的文件类型，格式'*.jpg;*.doc'
uploader:'',//文件提交的地址
auto:true,//是否开启自动上传
method:'post',//发送请求的方式，get或post
multi:true,//是否允许选择多个文件
isSingle:false,// 是否是单个文件上传，如果是单个文件上传，选择文件后，上传按钮会消失，multi也会被强制设定为false
formData:null,//发送给服务端的参数，格式：{key1:value1,key2:value2}
fileObjName:'file',//在后端接受文件的参数名称，如PHP中的$_FILES['file']
fileSizeLimit:2048,//允许上传的文件大小，单位KB
showUploadedFilename:false,//是否显示上传文件名
showUploadedPercent:false,//是否实时显示上传的百分比，如20%
showUploadedSize:false,//是否实时显示已上传的文件大小，如1M/2M
buttonText:'选择文件',//上传按钮上的文字
itemTitle:false,// 该上传item区域的标题：该值将作为上传按钮的提示语，上传时，会显示在左上角，注意，每一个上传区都会有，所以尽可能再isSingle=true的情况下使用
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//队列中的所有文件上传完成后触发
若是想要更改初始化参数，可在jquery.HHuploadify.js中修改，也可以在上述demo中的js中引用HHuploadify的时候修改，例如：
<script>
 $('#upload').HHuploadify({
     auto:true,
     fileTypeExts:'*.jpg;*.png;*.gift;*.doc',//允许上传的文件类型 
     isSingle : true,//上传一张图片图片
     fileSizeLimit:300,//图片最大300KB
     showUploadedSize:true,//实时显示已上传的文件大小，如1M/2M
     method:'post',//发送请求的方式，get或post
     formData: {item_id: <?php echo $item_id;?>},//传递到sub端的参数 
     uploader:'sub/upload_sub.php',
     onUploadComplete:function(file,data) {
         alert('图片上传成功'),
    }

});
</script>

发表评论