描述：

本文使用uploadify插件进行批量图片上传

原理：

导入uploadify插件核心代码，配置uploadify接口进行上传。

代码如下（本文使用thinkphp5.0框架作演示）：

引入文件：

<script src="__PLUG__/uploadify2/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="__PLUG__/uploadify2/uploadify.css">

1，控制器代码

/**
 * 上传图片
 * @return
 * status  上传状态 1成功0失败
 * msg     返回上传消息
 * file_id 上传图片文件id
 * url     上传图片返回路径
 */
public function brandUploadify(){
    $verifyToken = md5('unique_salt' . $_POST['timestamp']);
    if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
        $rs=model('admin/File')->uploadImg('Filedata','admin/goods');

        if ($rs['status']==1){
            /***************成功返回数据开始**************************/
            //返回数据在这里写
            /***************成功返回数据结束**************************/
            echo $rs['msg'];
        }else{
            echo $rs['msg'];
        }
    }else{
        echo 'Invalid file type.';
    }
}

2，模型代码

/**
    * 上传图片
    * @return
    * status  上传状态 1成功0失败
    * msg     返回上传消息
    * file_id 上传图片文件id
    * url     上传图片返回路径
    */
public function uploadImg($file='file',$location='admin'){
   // 获取表单上传文件 例如上传了001.jpg
   if (!empty($_FILES[$file]['name'])){
      $file = request()->file($file);
      // 移动到框架应用根目录/public/uploads/ 目录下
      $info = $file->validate(['size'=>1024*2*1000,'ext'=>'jpg,png,gif'])->move(ROOT_PATH . 'public' . DS . 'uploads'. DS . $location);
           if($info){
         // 成功上传后 获取上传信息
         $data['url']='/uploads/'.$location.'/'.str_replace('\\','/',$info->getSaveName());
         $data['original']='/uploads/'.$location.'/'.str_replace('\\','/',$info->getSaveName());
         $data['ext']=$info->getExtension();
         $data['size']=$info->getSize();
         $data['create_time']=time();
         $rs=Db::name('file')->insertGetId($data);
         if ($rs>0){
            $msg['status']='1';
            $msg['msg']='上传成功';
            $msg['file_id']=$rs;
            $msg['url']=$data['url'];
            return $msg;
         }else{
            $msg['status']='0';
            $msg['msg']='上传失败';
            return $msg;
         }
      }else{
         // 上传失败获取错误信息
         $msg['status']='0';
         $msg['msg']=$file->getError();;
         return $msg;
      }
   }
}

3，html代码

<div class="am-form-group">
    <label class="am-u-sm-3 am-form-label" > 批量上传 </label>
    <div class="am-u-sm-3">
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true">
    </div>
</div>

4，javascript代码

<script type="text/javascript">
    <?php $timestamp = time();?>
    $(function() {
        $('#file_upload').uploadify({
            'formData'     : {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                'brand_id'  : '{$info.id}'
            },
            //是否自动上传
            //'auto': false,
            'swf'      : '__PLUG__/uploadify2/uploadify.swf',
            'uploader' : "{:url('kbcms/admin_upload/brandUploadify')}",


            //开启调试
            'debug': false,
            //是否自动上传
            'buttonText': '选择照片',
            //flash
            //文件选择后的容器ID
            //'queueID': 'uploadfileQueue',
            //'multi': false,
            'fileTypeDesc': '支持的格式：',
            'fileTypeExts': '*.jpg;*.jpge;*.gif;*.png',
            //'removeTimeout': 1,

            //返回一个错误，选择文件的时候触发
            'onSelectError': function (file, errorCode, errorMsg) {
                switch (errorCode) {
                    case -100:
                        alert("上传的文件数量已经超出系统限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件！");
                        break;
                    case -110:
                        alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小！");
                        break;
                    case -120:
                        alert("文件 [" + file.name + "] 大小异常！");
                        break;
                    case -130:
                        alert("文件 [" + file.name + "] 类型不正确！");
                        break;
                }
            },
            //检测FLASH失败调用
            'onFallback': function () {
                alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
            },
            //上传到服务器，服务器返回相应信息到data里
            'onUploadSuccess': function (fileObj, data, response) {
                str=$.parseJSON(data);
                html_str="<img src='"+str.url+"' width='80px' height='80px'>";
                $('#uploadify_imgs').append(html_str);
            }
        });
    });
</script>

5，uploadify环境包

uploadify2.zip