uploadify使用总结

最近写上传页面写多了，总结了通用的uploadify使用方法，并将初始化写成了函数，方便调用；同时还总结了清理uploadify双击完就已经将无用的静态文件传至服务器上的函数；另外在php端处理上传文件的函数。

首先，在页面上的初始化函数如下，(js部分)

/** * 初始化uploadify插件 * 使用示例：initUploadify('usage_tmp', 'usage_preview', 'usage', 'solution', '主要功能', '{:U("Common/upload")}', '__PUBLIC__/uploadify/uploadify.swf'); * 其中uploader指向php的upload函数请参见lym.php * @param  {string} id           [file类型input元素的id属性值] * @param  {string} previewClass [放置预览图片的div的class名] * @param  {string} name         [提交表单的hidden名称] * @param  {string} folderName   [Uploads目录下的子目录名称] * @param  {string} btnName      [上传按钮上显示的名称] * @param  {string} uploader     [文件传到php手里的处理函数] * @param  {string} swfPath      [.swf文件的位置] * 注：swf的路径需要修改了 *     'swf': '__PUBLIC__/uploadify/uploadify.swf' => 'swf': '../../Public/uploadify/uploadify.swf', *     前者是在模板当中直接使用的地址，__PUBLIC__会得到解析，但将函数放在这里时，不通过控制器，所以路径需要修改 *     swfPath用来解决add和edit/id/211/这种需要跨越不同级数父级目录来找到.swf文件的问题 *     同样的道理，uploader对应的也应该有所调整 */function initUploadify(id, previewClass, name, folderName, btnName, uploader, swfPath){    var str = '';    $('#'+id).uploadify({        'multi': false,        'swf': swfPath,        'uploader': uploader,        'buttonText': btnName,        'formData': {pType: folderName},        onUploadSuccess: function(file, data, response){            str += "<img width='40%' src='/Uploads/" + data + "'>";            $('.'+previewClass).html(str);            $('input[name='+name+']').val('/Uploads/'+data);        }    });}

php端的处理函数如下：

    /**     * 基于ThinkPHP上传文件的处理     * 结合lym.js当中的initUploadify函数     * pType表示上传上来的文件属于什么类型，不同类型的文件存储路径有所区分     * @return $info [string] [返回上传文件的存储路径]     */    public function upload(){        if(!empty($_FILES)){            $upload = new \Think\Upload();            $upload->maxSize = 3145782;            $upload->exts = array('jpg', 'gif', 'png', 'jpeg');            switch($_POST[pType]){                case 'qrcode':                    $folderName = 'qrcode/';                    break;                case 'product':                    $folderName = 'product/';                    break;                case 'specification':                    $folderName = 'specification/';                    break;                case 'interface':                    $folderName = 'interface/';                    break;                case 'solution':                    $folderName = 'solution/';                    break;                default:                    $folderName = 'carousel/';                    break;            }            $upload->savePath = $folderName;            $images = $upload->upload();            if($images){                $info = $images['Filedata']['savepath'].$images['Filedata']['savename'];                die($info);            }else{                die($upload->getError());            }        }    }

php端的清理uploadify预览之后的无用图片的函数如下：

    /**     * 有一个操作：使用uploadify双击了一个图片，预览，然后没点保存，又双击了一张，又预览，实则图片已经上传到了服务器上     * 不论点了‘保存’还是‘取消’，图片都已经在服务器上了，并且是没有用的，因此这类文件必须清除     * 调用示例：parent::clearUploadedFilesByUploadifyMultiField($id, 'Product', 'image, specification, interface');     * 兼容单字段的调用示例：parent::clearUploadedFilesByUploadifyMultiField($id, 'Carousel', 'url');     * @param  integer $id        [根据某条记录的id确定要清理的目标文件夹]     * @param  string  $tbName    [要操作的表名]     * @param  string  $fieldStr  [依据的字段字符串，多个字段使用逗号分隔]     */    public function clearUploadedFilesByUploadifyMultiField($id=0, $tbName='Product', $fieldStr='image, specification, interface'){        $row = M($tbName)->find($id);        $fieldArr = explode(',', $fieldStr);        foreach($fieldArr as $fieldName){            $path = explode('/', $row[trim($fieldName)]);            $folders[] = substr($row[trim($fieldName)], 0, strrpos($row[trim($fieldName)], '/'));            $tmpRecordFiles[] = M($tbName)->where(trim($fieldName).' like "%'.$path[3].'%"')->getField(trim($fieldName), true);        }        foreach($tmpRecordFiles as $tmpR){            foreach($tmpR as $tr){                $recordFiles[] = $tr;            }        }        foreach($folders as $folder){            $tmpExist[] = glob(ltrim($folder, '/').'/*');        }        foreach($tmpExist as $t){            foreach($t as $t1){                $realExistFiles[] = $t1;            }        }        foreach($realExistFiles as $file){            if(is_file($file) && !in_array('/'.$file, $recordFiles)){                @unlink($file);            }        }    }

当然，上述js是基于jQuery框架的，php是基于ThinkPHP框架的。

对了，把html的架子也补上吧，感觉还不错，不过是针对后台页面的，基于bootstrap，新增操作和修改操作通用。

        <!-- 位于表单当中，uploadify上传并预览的结构 -->        <div class="form-group">            <label class="col-sm-2 control-label">解决方案正图</label>            <div class="col-sm-8">                <div class="row">                    <input type="file" id="image_tmp" class="form-control" multiple="true">                    <input type="hidden" name="image" value="{$row[image]}">                </div>                <div class="row">                    <div class="col-sm-12 image_preview"></div>                </div>            </div>        </div>