【前端】jQuery上传图片插件 : uploadifive

干嘛用 : 写页面的时候有一栏让用户上传头像/图片什么的

引入

先引入uploadifive包然后在引入到要加的页面 , 示例 :

注意这是我自己引入的, 不要直接复制黏贴代码 , 因为每个人放的包位子不一样

<link type="text/css" rel="stylesheet" href="/js/plugins/uploadifive/uploadifive.css" />
<script type="text/javascript" src="/js/plugins/uploadifive/jquery.uploadifive.min.js"></script>

注意 : 我还搭配了ckEditor(文本编辑器)一起的

什么是ckeditor及如何引入,此处指路:CKEditor 简介_mengyong1108的博客-CSDN博客_ckeditor是什么

代码

 参数上（比如auto，uploadScript啥的）我只写了需要的参数,没有全部列举 ,  以下为示例 :

    
    <link type="text/css" rel="stylesheet" href="/js/plugins/uploadifive/uploadifive.css" />
    <script type="text/javascript" src="/js/plugins/uploadifive/jquery.uploadifive.min.js"></script>

    <script src="/js/ckeditor/ckeditor.js"></script>
    <script>
        //表单提交验证
        $(function () {
            //富文本框图片配置
            var ck = CKEDITOR.replace( 'content',{
                filebrowserBrowseUrl: '/strategy/info',
                filebrowserUploadUrl: '/uploadImg_ck'
            });
            //图片上传
            $('.imgBtn').uploadifive({
                'auto' : true,  
                //自动上传然后发请求,意思就是你选好图片后会马上发请求,你去后台写接收
                'uploadScript' : '/uploadImg',   // 接请求的路径你自己定啥
                buttonClass:"btn-link",
                'fileObjName' : 'pic',   //上传文件参数名
                'buttonText' : '浏览...', // 按钮上内容 , 按钮还可以自定义height和width
                'fileType' : 'image', // 文件上传类型
                'multi' : false, // 是否可以上传多个
                'fileSizeLimit'   : 5242880, // 限制文件最大为
                'removeCompleted' : true, //取消上传完成提示
                'uploadLimit' : 1, // 上传文件个数限制
                //'queueSizeLimit'  : 10, 一次可在队列中拥有的最大文件数
                'overrideEvents': ['onDialogClose', 'onError'],    
                //onDialogClose 取消自带的错误提示
                'onUploadComplete' : function(file, data) { 
                //方法意思:对于完成的每个上传文件,各触发一次这个方法
                    $("#imgUrl").attr("src" ,data);  //data约定是json格式 图片地址
                    $("#coverUrl").val(data);
                },
                onFallback : function() { 
                //如果浏览器没有兼容的HTML5文件API功能，则在初始化期间触发
                    $.messager.alert("温馨提示","该浏览器无法使用!");
                }
            });
            //保存
            $("#btn_submit").click(function () {
                //异步提交时， 富文本框可能出问题
                $("#content").val(ck.getData())
                $("#editForm").ajaxSubmit(function (data) {
                    console.log(data);
                    if(data.code == 200){
                        window.location.href = "/strategy/list";
                    }else{
                        $.messager.alert("温馨提示", data.msg);
                    }
                })
            })
        })
    </script>

大哥说这个东西很老了用起来还一堆问题但是毕竟公司还是一直用着的就用来传个图而已。。

如果觉得麻烦可以直接上jq22 搜索：图片上传 ， 然后扒一个下来用就好了

如果你还想了解完整的5$ ，此处有大佬写全了的：

uploadifive参数说明_ai520587的博客-CSDN博客_uploadifive

为什么这么久没更新说好的日更呢 ： 出去玩摆烂了。。现在回来了一定更！