美文网首页
baige统一图片上传

baige统一图片上传

作者: wwwxi | 来源:发表于2017-10-24 15:54 被阅读0次

    1.前端文件

        <div class="control-group">
            <label class="control-label"><em>*</em>图片:</label>
            <div class="controls">
                <input type="hidden" id="Form_image" name="Form[imgurl]" value="<?php echo $data ? Html::encode($data->imgurl) : '';?>" placeholder="">
                <a type="button" class="btn btn-default" id="upload">选择文件</a>
                <img src="<?php echo $data ? Html::encode($data->imgurl) : '';?>" style="max-height:100px;" id="show_image">
                <p class="font-red" id="img-upload-error"></p>
            </div>
        </div>
        
        通过button_placeholder_id:"upload"关联a标签上传
        //指定一个dom元素的id,该dom元素在swfupload实例化后会被Flash按  
        钮代替,这个dom元素相当于一个占位符
    
        var uploadAvatar = new ksFileUpload({
            //swfupload.swf文件的绝对或相对地址,相对地址是指相对于当前的页面地址。实例化swfupload后,就不能再改变该属性的值了。
            flashUrl: "/static/js/upload/swfupload.swf",  
            //处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址
            upload_url : "<?php echo Yii::$app->params['apiUrl'];?>/site/upload",
            //
            file_post_name : "file",
           //一个对象直接量,里面的键/值对会随着每一个文件一起上传,文件上传要附加一些信息时很有用
            post_params : {type: "picture"},
            //该属性指定了允许上传的文件类型,当有多个类型时使用分号隔开
            file_types : ["jpg", "jpeg", "png"],
            //指定要上传的文件的最大体积,可以带单位,合法的单位有:B、KB、MB、GB,如果省略了单位,则默认为KB。该属性为0时,表示不限制文件的大小
            file_size_limit : "5MB",
            //是否选中后自动上传
            auto_upload: true,
            //指定一个dom元素的id,该dom元素在swfupload实例化后会被Flash按钮代替,这个dom元素相当于一个占位符
            button_placeholder_id: "upload",
    
            msg: {
                "-110": "上传的图片不能超过100M",
                "-130": "请上传jpg、jpeg、png格式的图片",
                "-140": "图片上传失败,请稍后重试",
                "-150": "请先选择图片"
            },
           /** upload_start_handler: null, 文件开始上传事件,选填,默认为null
             * upload_progress_handler: null, 文件上传中进度事件,选填,默认为null
             * upload_error_handler: null, 文件上传出错事件,选填,默认为null
             * upload_success_handler: null, 文件上传成功事件,选填,默认为null
             * upload_complete_handler: null, 文件开始上传后事件,不论成功或者失败都会触发,选填,默认为null
            */
            file_queue_error_handler: function(msg) {
                $("#img-upload-error").html(msg);
            },
    
            upload_error_handler: function(msg) {
                $("#img-upload-error").html(msg);
            },
    
            upload_success_handler: function(file, res) {
                if(res.code == 1) {
                    var src = res.data.url + res.data.path;
                    $("#Form_image").val(src);
                    $("#show_image").attr("src", src);
                } else {
                    $("#img-upload-error").html(res.msg);
                }
            }
        });
    

    2.后台处理

    请求路径:/site/upload  
    核心方法:$res = (new hlp\Upload())->run();
    $res = $isBase64 ? $this->uploadByBase64() : $this->uploadByFile();
    //通过Base64编码方式上传或通过HTTP form multipart/form-data 方式上传
    

    3.待看:使用一致性哈希实现Redis分布式部署
    http://ju.outofmemory.cn/entry/152607

    相关文章

      网友评论

          本文标题:baige统一图片上传

          本文链接:https://www.haomeiwen.com/subject/wyqxpxtx.html