使用Web Uploader實現文件上傳

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('上傳完了');     });