jquery图片上传插件HHuploadify

好几天没有写文章了，最近在作公司的一个后台图片上传，基于Huploadify重写了一下这个插件，在它的基础上作了一些定制，已经托管在github，能够经过这里获悉。

简介

有一个著名的图片上传插件uploadify，在这个插件基础上，Huploadify被开发出来，是由国人开发的，使用起来也比较好用。可是，我 但愿对本身的项目进行定制，但愿实现像淘宝添加图片那样，点击一个上传按钮，而后本身上传，上传的时候，有一个进度条，上传完以后，预览图片。

同时，在Huploadify基础上，还增长了单个图片上传，好比在上传头像的时候，不可能让你上传多张图片。

所以，我在Huploadify的基础上进行修改，获得了HHuploadify。

HHuploadify的用法和Huploadify的用法是如出一辙的。不过增长了几个点：

• 增长isSingle配置项，在初始化的时候，若是isSingle=true，那么这个上传只能上传一张图片。domo.html中有案例

• 增长了上传图片结束后，将图片显示到该上传区域中预览，返回格式必须是json，有一个url字段。upload.php中有案例

修改样式：经过修改HHuploadify.css文件中的样式来控制表现。

上传后获得的图片预览是经过将图片做为该区域的背景图片实现的，所以，若是要调整该图片，必须经过css来进行控制。

安装

获取代码：从个人github上下载HHuploadify的源代码。

首先，你的网页中得引入jquery

<script src="jquery-2.2.0.min.js"></script>

其次，再网页中引入插件文件

<script src="jquery.HHuploadify.js"></script>

再次，再网页头部引入HHuploadify的样式文件

<link rel="stylesheet" href="HHuploadify.css">

若是你想对HHuploadify的样式进行修改，能够修改HHuploadify.css文件中的具体规则，改完以后，把上面的地址改成HHuploadify.css，从而使用新的样式。固然，你也能够把里面的样式所有拷贝出来，放到本身的样式文件里面去，这样就能够不用引用HHuploadify.css。
使用

HHuploadify会初始化一个按钮，让你进行上传。所以，在你须要展现这个按钮的地方作以下操做。假如你想调用的容器为<div id="upload"></div>，只须要在网页底部加入以下代码：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        uploader:'upload.php' // 必须的，必须指定用来处理上传逻辑的后端处理URL
    });
</script>

这样，就能够初始化一个按钮，点击按钮以后能够多选多张图片，每张图片会各自提交到upload.php。这里提示一下，uploadify自己就是一张一张图片提交的，而不是全部图片一块儿提交。upload.php能够是你本身的URL，在这个URL进行图片处理和保存，而且返回一个包含url字段的json字符串，经过这个url字段让上传区域展现图片。

单张片上传

你可能如今想上传一张头像图片，先把css改成你想要的结果。在上面的代码中，只须要加入一个isSingle参数便可：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        isSingle:true,
        uploader:'upload.php'
    });
</script>

这样，这个区域只能进行一张图片的上传。

初始化参数

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:'选择文件',//上传按钮上的文字 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//队列中的全部文件上传完成后触发

以上是HHuploadify的全部默认初始化参数，除了isSingle之外，其余全部的都是和Huploadify同样的，只不过我修改了它的默认值。

具体文档请阅读Huploadify。

例子

上传图片后提交保存相册

如今模拟用HHuploadify来作一个相册。用户先建立了一个相册A，多选图片，上传到该相册，图片所有由数据库保存URL，并有对应的ID，如今要求，有一个相册和图片的关系数据表album_photo_relation用来保存哪一张图片属于哪个相册。那么问题来了，如何在上传图片的时候实现这个过程呢？

很简单，在初始化参数中增长formData参数，好比：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        formData: {album_id: <?=$album_id?>},
        uploader:'upload.php'
    });
</script>

在upload.php中就能接收到该相册的ID：$_POST['album_id']。这样，在upload.php中就能够在插入完photo得到photo_id后，再向alubm_photo_relation表中插入一条记录。

如今问题又来了，加入要求不容许先建立相册、进入相册再上传，如今要求相册建立时先上传图片，上传完以后，和相册信息（如名称、描述等）一同提交到create_album.php。

这就复杂了，由于不能经过formData，直接在upload.php中完成每一张图片的操做。怎么办呢？个人解决办法是，在图片上传完成后，将图片的photo_id加载到当前的页面里面，提交建立相册的时候，同时能够知道该相册有哪些图片。

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        uploader: 'upload.php',
        onUploadSuccess: function(file,data) {
            var photo = JSON.parse(data);
            var photo_id = photo.id;
            var instanceNumber = $('.uploadify').length+1;
            var file_index = file.index;
            $('#fileupload_' + instanceNumber + '_' + file_index).append('<input type="hidden" name="photo_id[]" value="' + photo_id + '">');
        }
    });
</script>

上面的代码主要利用到了onUploadSuccess事件，及当一张图片上传成功以后的回调。这样，在删除的时候，能够删除掉对应的input，在提交的时候，能够提交对应的photo_id[]。

上传完图片后可对图片进行拖动排序

在相册的案例中，有一种状况是，还能够对图片进行拖动，调整图片组的顺序。怎么实现呢？首先你得有一个可以实现拖动的jquery插件，我推荐DragSort。

<script src="jquery.dragsort-5.2.0.min.js"></script>
<script>
$('#upload').HHuploadify({
    fileTypeExts:'*.jpg;*.png;*.gift',
    uploader:'upload.php',
    onQueueComplete:function() {
        var instanceNumber = $('.uploadify').length+1;
        var $instance = $('#file_upload_' + instanceNumber + '-queue');
        $instance.dragsort("destroy");
        $instance.dragsort({
                dragSelector: "div.uploadify-queue-item",
                dragBetween: true,
                dragEnd: function(){
                    $instance.find('.uploadify-queue-item').removeAttr('style');
                },
                placeHolderTemplate: '<div class="uploadify-queue-item"></div>'
            });
    }
});
</script>

上面的代码经过一个onQueueComplate事件绑定，在全部文件上传结束后，执行函数中的动做。函数中的动做可使该区域内的全部图片区域绑定dragsort，实现拖动排序的功效。

扩展函数

为了实现更简洁的载入，我新增了HHuploadifyReady.js，里面有两个函数initHHuploadify函数和resetHHuploadify函数。

function initHHuploadify(selector,uploader,field,isSingle)

selector是要初始化的选择器，uploader是上传后端处理URL，field是回调的时候，往区域内插入的input的name值，注意，插入的input name=field[]，提交的是一个数组，后端应该注意一下。isSingle就不解释了，表示是否单个图片上传，当为true时，input name=field，不是数组。

为了便于使用，通常再使用的时候，你能够不设置第四个参数，而是使用下面这个函数：

function initHHuploadifyOne(selector,uploader,field)

这个函数是从上面的函数衍生出来的，不用传第四个参数，便可让HHuploadify初始化为一个只能上传一张图片的区域。

function resetHHuploadify(selector,images,field)

当完成初始化以后，你会发现，有的时候你的页面上须要放置几张图片进去，好比在编辑相册的时候，你的相册中自己已经存在了一些图片了，因此你在编辑它的时候，必须让相册中的图片都显示出来，这个时候，须要用resetHHuploadify来实现。它有三个参数，selector和前面的同样，都是指初始化时的对象选择器，例如$(selector)在前面的案例中就是$('#upload')。images是一个对象数组，包含了要用于显示的图片信息，首先它是一个数组，其次它的每个元素又是对象，形式以下：

[{'id' => 4,'url' => '/images/afa.jpg'},{'id' => 56,'url' =>
'/images/aafdsfa.jpg'},{'id' => 12,'url' => '/images/12fa.jpg'}]

为何要这样呢？id是用来做为input的value值的，url是用来展现图片的，就是这样。field则是input的name值，注意，因为是多个input，因此它也是input name=field[]，是个数组，后端接收的时候要注意。

不过在resetHHuploadify的基础上，也衍生出了resetHHuploadifyOne

function resetHHuploadifyOne(selector,image,field)

惟一的区别在于第二个参数，由images变为image，不是一个数组，而是一个对象，形式以下：

{'id' => 56,'url' => '/images/aafdsfa.jpg'}

只有一张图片的信息。

OK，对HHuploadify的推介就到这里了，若是你有不懂的地方，欢迎到个人github去提交issue。