webuploader 多文件上傳

直接代碼:

 ####  uploader 若是是使用同一個引入文件的話 須要在個別地方保持一致 不然容易出錯

var uploader = WebUploader.create({

 

    // 選完文件後，是否自動上傳。

    auto: false,

 

    // swf文件路徑

swf: BASE_URL + '/Uploader.swf',

 

    // 文件接收服務端。

    server: UP_FUNCTION,  主要的路徑  上傳成功後的數據流 會提交到此方法裏, 因此在TP框架 須要使用 上傳組件進行接收吧文件存儲到本地 同時 將存儲的數據庫按json 形式 返回

 

    // 選擇文件的按鈕。可選。

    // 內部根據當前運行是建立，多是input元素，也多是flash.

//     pick: '#filePicker',

 

    // 只容許選擇圖片文件。

    accept: {

        title: 'Images',

        extensions: 'gif,jpg,jpeg,bmp,png',

        mimeTypes: 'image/jpg,image/jpeg,image/png'

    }

});

uploader.addButton({

id: '#filePicker',

    innerHTML: '選擇圖片'

});

// 當有文件添加進來的時候  此處與官方一致

uploader.on( 'fileQueued', function( file ) {

    var $li = $(

            '<div id="' + file.id + '" class="file-item thumbnail">' +

                '<span class="jieguo success">ok</span>'+

                '<img class="web_up_img">' +

                '<div class="info">' + file.name + '</div>' +

            '</div>'

            ),

        $img = $li.find('img');

 

 

    // $list爲容器jQuery實例

    $('#fileList').append( $li );

 

    // 建立縮略圖

    // 若是爲非圖片文件，能夠不用調用此方法。

    // thumbnailWidth x thumbnailHeight 爲 100 x 100

    uploader.makeThumb( file, function( error, src ) {

        if ( error ) {

            $img.replaceWith('<span>不能預覽</span>');

            return;

        }

 

        $img.attr( 'src', src );

    }, 100, 100 );

});

// 文件上傳過程當中建立進度條實時顯示。

uploader.on( 'uploadProgress', function( file, percentage ) {

    var $li = $( '#'+file.id ),

        $percent = $li.find('.progress span');

    // 避免重複建立

    if ( !$percent.length ) {

        $percent = $('<p class="progress" style=""><span></span></p>')

                .appendTo( $li )

                .find('span');

    }

    $percent.css( 'width', percentage * 100 + '%' );

});

 

// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。

uploader.on( 'uploadSuccess', function( file,response ) {

if(response.status==1){

$( '#'+file.id ).addClass('upload-state-done');

var str = "<input type='text' name='z_photos[]' value='"

+response.msg

+"' id='res_"

+file.id

+"' />";

// console.log(str);

$('#upok_result').append(str);

}else{

$( '#'+file.id ).addClass('upload-state-done-error');

var $li = $( '#'+file.id );

$('<span class="jieguo error">上傳失敗</span>').prependTo( $li );

}

   

});

 

// 文件上傳失敗，顯示上傳出錯。

uploader.on( 'uploadError', function( file ) {

$( '#'+file.id ).addClass('upload-state-done-error');

    var $li = $( '#'+file.id ),

        $error = $li.find('span.error');

 

    // 避免重複建立

    if ( !$error.length ) {

        $error = $('<span class="jieguo error">上傳失敗</span>').prependTo( $li );

    }

 

});

 

// 完成上傳完了，成功或者失敗，先刪除進度條。

uploader.on( 'uploadComplete', function( file ) {

    $( '#'+file.id ).find('.progress').remove();

    $( '#'+file.id ).append('<span class="jieguo success" style="cursor:pointer;display:block;" onclick=\'delimg("'+file.id+'")\'>刪除</span>');

});

// 提交上傳

$("#upstart").click(function(){

uploader.upload();

});

 

 

//刪除圖片

function delimg(fileid){

$("#"+fileid).remove();

$("#res_"+fileid).remove();

}