使用Web Uploader实现文件上传

2019独角兽企业重金招聘Python工程师标准>>>

1.引入js和css文件

    //引入js文件

    <script type="text/javascript" src="js/webuploader.js"></script>

    //引入css文件(也可以自己写按钮的样式，不引入)，这里是自己写的css样式

    <link href="css/webuploader.css" rel="stylesheet">

    #uploader-demo {
            position: relative;
        }
        #filePicker {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #filePicker label {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }
        #filePicker input[type="file"] {
            display: none;
        }

2.html布局

    <div id="uploader-demo">
        <!--这里是存放文件信息-->
        <div id="fileList" class="uploader-list"><img src="" id="img"></div>
        <div id="filePicker">选择图片</div>
    </div>

3.js实现部分

    //初始化WebUploader
    var uploader = WebUploader.create({
        //swf的路径，可以不用写
        swf: BASE_URL + 'xxx.swf'
        //文件接收服务器
        server: 'json/update.json',
        //现在文件的按钮
        pick: '#filePicker',
        // 上传的类型
        accept: {
            title: 'Images',
            mimeTypes: 'image/*'
        }
    });
    //上传中
    uploader.on('uploadProgress', function(file, percentage){
        //percentage 上传的进度
        console.log('上传中...');
    });

    //上传成功
    uploader.on('uploadSuccess', function(file, data){
        console.log('上传成功');
        console.log(data.listText[0].imgUrl);
        $('#img').attr( 'src', data.listText[0].imgUrl );
    });

    //上传出错
    uploader.on('uploadError', function(file){
        console.log('上传出错');
    })

    //上传完了
    uploader.on('uploadComplete', function(file){
        console.log('上传完了');
    });

    

转载于:https://my.oschina.net/u/3431829/blog/1550576