webupload上传插件中，单个文件上传处理

上传插件如何使用，我这里就不多说了，网上大把教程。今天我要讲的是如何限制上传一个文件，以及当文件选择错误是，再重新选择文件导致的问题。

默认给上传插件支持多文件上传，但是我们有很多需求是之上传单个文件，下面就来一起学习学习吧！

插件html

<div class="form-group">
    <label for="img" class="control-label col-sm-2"><span class="require_red">*&nbsp;&nbsp;</span>奖品图片：</label>
     <div id="uploader" class="wu-example col-sm-10 col-md-4">
     <input type="hidden" name="img" id="img" value="{{$resData['award_pic_normal']}}">
     <!--预览-->
     <div id="preview" class="uploader-list" style="margin-bottom: 3px"><img src="{{ $resData['award_pic_normal']}}" alt=""></div>
     <div id="picker" class="col-sm-5 col-md-3">选择文件</div>
     <div id="ctlBtn" class="btn btn-primary" style="height: 40px">开始上传</div>
       　　<span class="require_red font-size">图片尺寸255x255，透明背景</span>
     </div>
</div>

插件初始化：

 var uploader = WebUploader.create({
            auto:false,

            // swf文件路径
            swf: "{{ asset("plugins") }}/webuploader-0.1.5/Uploader.swf) ",

            // 文件接收服务端。
            server: "{{url('/ad/upload/img')}}",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id:'#picker',
                multiple:false  //限制多文件上传
            },
            accept:{
                title:'Images',
                extentions: "png,jpeg,jpg",
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            formData:{
                '_token':'{{csrf_token()}}'//laravel框架必不可少的
            },
            fileVal:"img",
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            fileNumLimit: 1
        });

只需把multiple的值设为false，且fileNumLimit文件个数设为1，但是，这里还没完，如果运营在选择图片时选择错误，再点击选择图片时，图片不会替换掉，只能刷新再选择，显然这样体验是很不好的（会被人在心里默默骂死）。

所以还得加上下面关键一步：

 // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    layer.msg('不能预览');
                    return;
                }
                $("#preview").html("<img src='"+src+"'>");
            }, 100, 100 );
            //删除错误的第一个文件
            $("#picker").on("click",function () {
                uploader.removeFile(file);
            })
        });
        //点击上传
        $("#ctlBtn").on("click",function () {
            uploader.upload();
        })
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file , msg ) {
            $( '#'+file.id ).addClass('upload-state-done');
            // 把服务器返回的图片地址保存到隐藏域
            if(msg.status ="SUCCESS"){
                layer.msg('上传成功',{icon:1,time:2000});
                $('input[name=img]').val( msg.fileUrl );
            }else{
                layer.msg("上传失败",{icon:2,time:3000});
            }

        });
        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

$("#picker").on("click",function () {
uploader.removeFile(file);
})

该代码的含义是：给选择按钮添加点击事件，目的是删除队列中已有的文件，这样就可以替换原来错误的文件了，亲试有效！！

webupload上传插件中，单个文件上传处理

猜你喜欢