美文网首页
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