整 理：雷 媛
时 间：2016-02-05
说 明： 上传图片的插件
时 间：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>
