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;" οnclick=\'delimg("'+file.id+'")\'>删除</span>');

});

// 提交上传

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

uploader.upload();

});

 

 

//删除图片

function delimg(fileid){

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

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

}

转载于:https://www.cnblogs.com/JdsyJ/p/8488968.html