码迷，mamicode.com
首页 > Web开发 > 详细

asp.net webuploader粘贴，拖拽，点击上传图片

时间：2016-04-11 12:07:38      阅读：260      评论：0      收藏：0      [点我收藏+]

标签：

demo.html代码：
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>演示 - Web Uploader</title>
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
		<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
		<link rel="stylesheet" type="text/css" href="/webuploader/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="/webuploader/css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="/webuploader/css/webuploader.css">
		<link rel="stylesheet" type="text/css" href="/webuploader/css/demo.css">
	</head>

	<body>
		<div id="wrapper">
			<div class="page-body">
				<div id="post-container" class="container">
					<div class="page-container">
						<h1 id="demo">Demo</h1>
						<p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>
						<div id="uploader" class="wu-example">
							<div class="queueList">
								<div id="dndArea" class="placeholder">
									<div id="filePicker"></div>
									<p>或将照片拖到这里，单次最多可选300张</p>
								</div>
							</div>
							<div class="statusBar" style="display:none;">
								<div class="progress">
									<span class="text">0%</span>
									<span class="percentage"></span>
								</div>
								<div class="info"></div>
								<div class="btns">
									<div id="filePicker2"></div>
									<div class="uploadBtn">开始上传</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 添加全局站点信息
			var BASE_URL = ‘/webuploader‘;
		</script>
		<script type="text/javascript" src="/webuploader/js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="/webuploader/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/webuploader/js/webuploader.js"></script>
		<script type="text/javascript" src="/webuploader/js/demo.js"></script>

	</body>

</html>
技术分享

demo.js代码：
jQuery(function() {
    var $ = jQuery,    // just in case. Make sure it‘s not an other libaray.
 
        $wrap = $(‘#uploader‘),
 
        // 图片容器
        $queue = $(‘<ul class="filelist"></ul>‘)
            .appendTo( $wrap.find(‘.queueList‘) ),
 
        // 状态栏，包括进度和控制按钮
        $statusBar = $wrap.find(‘.statusBar‘),
 
        // 文件总体选择信息。
        $info = $statusBar.find(‘.info‘),
 
        // 上传按钮
        $upload = $wrap.find(‘.uploadBtn‘),
 
        // 没选择文件之前的内容。
        $placeHolder = $wrap.find(‘.placeholder‘),
 
        // 总体进度条
        $progress = $statusBar.find(‘.progress‘).hide(),
 
        // 添加的文件数量
        fileCount = 0,
 
        // 添加的文件总大小
        fileSize = 0,
 
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
 
        // 缩略图大小
        thumbnailWidth = 110 * ratio,
        thumbnailHeight = 110 * ratio,
 
        // 可能有pedding, ready, uploading, confirm, done.
        state = ‘pedding‘,
 
        // 所有文件的进度信息，key为file id
        percentages = {},
 
        supportTransition = (function(){
            var s = document.createElement(‘p‘).style,
                r = ‘transition‘ in s ||
                      ‘WebkitTransition‘ in s ||
                      ‘MozTransition‘ in s ||
                      ‘msTransition‘ in s ||
                      ‘OTransition‘ in s;
            s = null;
            return r;
        })(),
 
        // WebUploader实例
        uploader;
 
    if ( !WebUploader.Uploader.support() ) {
        alert( ‘Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器‘);
        throw new Error( ‘WebUploader does not support the browser you are using.‘ );
    }
 
    // 实例化
    uploader = WebUploader.create({
        pick: {
            id: ‘#filePicker‘,
            label: ‘点击选择图片‘
        },
        dnd: ‘#uploader .queueList‘,
        paste: document.body,
 
        accept: {
            title: ‘Images‘,
           // extensions: ‘gif,jpg,jpeg,bmp,png‘,
            mimeTypes: ‘image/*‘
        },
 
        // swf文件路径
        swf: BASE_URL + ‘Uploader.swf‘,
 
        disableGlobalDnd: true,
 
        chunked: true,
        // server: ‘http://webuploader.duapp.com/server/fileupload.php‘,
        server: ‘/webuploader/server/Uploader.ashx‘,
        fileNumLimit: 300,
        fileSizeLimit: 5 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 1 * 1024 * 1024    // 50 M
    });
 
    // 添加“添加文件”的按钮，
    uploader.addButton({
        id: ‘#filePicker2‘,
        label: ‘继续添加‘
    });
    // 当有文件添加进来时执行，负责view的创建
    function addFile( file ) {
        var $li = $( ‘<li id="‘ + file.id + ‘">‘ +
                ‘<p class="title">‘ + file.name + ‘</p>‘ +
                ‘<p class="imgWrap"></p>‘+
                ‘<p class="progress"><span></span></p>‘ +
                ‘</li>‘ ),
 
            $btns = $(‘<div class="file-panel">‘ +
                ‘<span class="cancel">删除</span>‘ +
                ‘<span class="rotateRight">向右旋转</span>‘ +
                ‘<span class="rotateLeft">向左旋转</span></div>‘).appendTo( $li ),
            $prgress = $li.find(‘p.progress span‘),
            $wrap = $li.find( ‘p.imgWrap‘ ),
            $info = $(‘<p class="error"></p>‘),
 
            showError = function( code ) {
                switch( code ) {
                    case ‘exceed_size‘:
                        text = ‘文件大小超出‘;
                        break;
 
                    case ‘interrupt‘:
                        text = ‘上传暂停‘;
                        break;
 
                    default:
                        text = ‘上传失败，请重试‘;
                        break;
                }
 
                $info.text( text ).appendTo( $li );
            };
 
        if ( file.getStatus() === ‘invalid‘ ) {
            showError( file.statusText );
        } else {
            // @todo lazyload
            $wrap.text( ‘预览中‘ );
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $wrap.text( ‘不能预览‘ );
                    return;
                }
 
                var img = $(‘<img src="‘+src+‘">‘);
                $wrap.empty().append( img );
            }, thumbnailWidth, thumbnailHeight );
 
            percentages[ file.id ] = [ file.size, 0 ];
            file.rotation = 0;
        }
 
        file.on(‘statuschange‘, function( cur, prev ) {
            if ( prev === ‘progress‘ ) {
                $prgress.hide().width(0);
            } else if ( prev === ‘queued‘ ) {
                $li.off( ‘mouseenter mouseleave‘ );
                $btns.remove();
            }
 
            // 成功
            if ( cur === ‘error‘ || cur === ‘invalid‘ ) {
                console.log( file.statusText );
                showError( file.statusText );
                percentages[ file.id ][ 1 ] = 1;
            } else if ( cur === ‘interrupt‘ ) {
                showError( ‘interrupt‘ );
            } else if ( cur === ‘queued‘ ) {
                percentages[ file.id ][ 1 ] = 0;
            } else if ( cur === ‘progress‘ ) {
                $info.remove();
                $prgress.css(‘display‘, ‘block‘);
            } else if ( cur === ‘complete‘ ) {
                $li.append( ‘<span class="success"></span>‘ );
            }
 
            $li.removeClass( ‘state-‘ + prev ).addClass( ‘state-‘ + cur );
        });
 
        $li.on( ‘mouseenter‘, function() {
            $btns.stop().animate({height: 30});
        });
 
        $li.on( ‘mouseleave‘, function() {
            $btns.stop().animate({height: 0});
        });
 
        $btns.on( ‘click‘, ‘span‘, function() {
            var index = $(this).index(),
                deg;
 
            switch ( index ) {
                case 0:
                    uploader.removeFile( file );
                    return;
 
                case 1:
                    file.rotation += 90;
                    break;
 
                case 2:
                    file.rotation -= 90;
                    break;
            }
 
            if ( supportTransition ) {
                deg = ‘rotate(‘ + file.rotation + ‘deg)‘;
                $wrap.css({
                    ‘-webkit-transform‘: deg,
                    ‘-mos-transform‘: deg,
                    ‘-o-transform‘: deg,
                    ‘transform‘: deg
                });
            } else {
                $wrap.css( ‘filter‘, ‘progid:DXImageTransform.Microsoft.BasicImage(rotation=‘+ (~~((file.rotation/90)%4 + 4)%4) +‘)‘);
                // use jquery animate to rotation
                // $({
                //     rotation: rotation
                // }).animate({
                //     rotation: file.rotation
                // }, {
                //     easing: ‘linear‘,
                //     step: function( now ) {
                //         now = now * Math.PI / 180;
 
                //         var cos = Math.cos( now ),
                //             sin = Math.sin( now );
 
                //         $wrap.css( ‘filter‘, "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod=‘auto expand‘)");
                //     }
                // });
            }
 
 
        });
 
        $li.appendTo( $queue );
    }
 
    // 负责view的销毁
    function removeFile( file ) {
        var $li = $(‘#‘+file.id);
 
        delete percentages[ file.id ];
        updateTotalProgress();
        $li.off().find(‘.file-panel‘).off().end().remove();
    }
 
    function updateTotalProgress() {
        var loaded = 0,
            total = 0,
            spans = $progress.children(),
            percent;
 
        $.each( percentages, function( k, v ) {
            total += v[ 0 ];
            loaded += v[ 0 ] * v[ 1 ];
        } );
 
        percent = total ? loaded / total : 0;
 
        spans.eq( 0 ).text( Math.round( percent * 100 ) + ‘%‘ );
        spans.eq( 1 ).css( ‘width‘, Math.round( percent * 100 ) + ‘%‘ );
        updateStatus();
    }
 
    function updateStatus() {
        var text = ‘‘, stats;
 
        if ( state === ‘ready‘ ) {
            text = ‘选中‘ + fileCount + ‘张图片，共‘ +
                    WebUploader.formatSize( fileSize ) + ‘。‘;
        } else if ( state === ‘confirm‘ ) {
            stats = uploader.getStats();
            if ( stats.uploadFailNum ) {
                text = ‘已成功上传‘ + stats.successNum+ ‘张照片至XX相册，‘+
                    stats.uploadFailNum + ‘张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>‘
            }
 
        } else {
            stats = uploader.getStats();
            text = ‘共‘ + fileCount + ‘张（‘ +
                    WebUploader.formatSize( fileSize )  +
                    ‘），已上传‘ + stats.successNum + ‘张‘;
 
            if ( stats.uploadFailNum ) {
                text += ‘，失败‘ + stats.uploadFailNum + ‘张‘;
            }
        }
 
        $info.html( text );
    }
 
    function setState( val ) {
        var file, stats;
 
        if ( val === state ) {
            return;
        }
 
        $upload.removeClass( ‘state-‘ + state );
        $upload.addClass( ‘state-‘ + val );
        state = val;
 
        switch ( state ) {
            case ‘pedding‘:
                $placeHolder.removeClass( ‘element-invisible‘ );
                $queue.parent().removeClass(‘filled‘);
                $queue.hide();
                $statusBar.addClass( ‘element-invisible‘ );
                uploader.refresh();
                break;
 
            case ‘ready‘:
                $placeHolder.addClass( ‘element-invisible‘ );
                $( ‘#filePicker2‘ ).removeClass( ‘element-invisible‘);
                $queue.parent().addClass(‘filled‘);
                $queue.show();
                $statusBar.removeClass(‘element-invisible‘);
                uploader.refresh();
                break;
 
            case ‘uploading‘:
                $( ‘#filePicker2‘ ).addClass( ‘element-invisible‘ );
                $progress.show();
                $upload.text( ‘暂停上传‘ );
                break;
 
            case ‘paused‘:
                $progress.show();
                $upload.text( ‘继续上传‘ );
                break;
 
            case ‘confirm‘:
                $progress.hide();
                $upload.text( ‘开始上传‘ ).addClass( ‘disabled‘ );
 
                stats = uploader.getStats();
                if ( stats.successNum && !stats.uploadFailNum ) {
                    setState( ‘finish‘ );
                    return;
                }
                break;
            case ‘finish‘:
                stats = uploader.getStats();
                if ( stats.successNum ) {
                    alert( ‘上传成功‘ );
                } else {
                    // 没有成功的图片，重设
                    state = ‘done‘;
                    location.reload();
                }
                break;
        }
 
        updateStatus();
    }
 
    uploader.onUploadProgress = function( file, percentage ) {
        var $li = $(‘#‘+file.id),
            $percent = $li.find(‘.progress span‘);
 
        $percent.css( ‘width‘, percentage * 100 + ‘%‘ );
        percentages[ file.id ][ 1 ] = percentage;
        updateTotalProgress();
    };
 
    uploader.onFileQueued = function( file ) {
        fileCount++;
        fileSize += file.size;
 
        if ( fileCount === 1 ) {
            $placeHolder.addClass( ‘element-invisible‘ );
            $statusBar.show();
        }
 
        addFile( file );
        setState( ‘ready‘ );
        updateTotalProgress();
    };
 
    uploader.onFileDequeued = function( file ) {
        fileCount--;
        fileSize -= file.size;
 
        if ( !fileCount ) {
            setState( ‘pedding‘ );
        }
 
        removeFile( file );
        updateTotalProgress();
 
    };
 
    uploader.on( ‘all‘, function( type ) {
        var stats;
        switch( type ) {
            case ‘uploadFinished‘:
                setState( ‘confirm‘ );
                break;
 
            case ‘startUpload‘:
                setState( ‘uploading‘ );
                break;
 
            case ‘stopUpload‘:
                setState( ‘paused‘ );
                break;
 
        }
    });
 
    uploader.onError = function( code ) {
        alert( ‘Eroor: ‘ + code );
    };
 
    $upload.on(‘click‘, function() {
        if ( $(this).hasClass( ‘disabled‘ ) ) {
            return false;
        }
 
        if ( state === ‘ready‘ ) {
            uploader.upload();
        } else if ( state === ‘paused‘ ) {
            uploader.upload();
        } else if ( state === ‘uploading‘ ) {
            uploader.stop();
        }
    });
 
    $info.on( ‘click‘, ‘.retry‘, function() {
        uploader.retry();
    } );
 
    $info.on( ‘click‘, ‘.ignore‘, function() {
        alert( ‘todo‘ );
    } );
 
    $upload.addClass( ‘state-‘ + state );
    updateTotalProgress();
});
 

asp.net webuploader粘贴，拖拽，点击上传图片

标签：

原文地址：http://www.cnblogs.com/ft-Pavilion/p/5377407.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！