百度 Web Uploader试用

<!--引入CSS-->
		<link rel="stylesheet" type="text/css" href="tpl/Wap/default/common/newclient/css/webuploader.css">

		<!--引入JS-->
		<script type="text/javascript" src="tpl/Wap/default/common/newclient/js/webuploader.custom.min.js"></script>
// 初始化Web Uploader
	var uploader = WebUploader.create({

	    // 选完文件后,是否自动上传。
	    auto: true,

	    // swf文件路径
	    swf: 'tpl/Wap/default/common/newclient/js/Uploader.swf',

	    // 文件接收服务端。
	    server: 'index.php?g=Wap&m=Store&a=put_wall_img',
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
	    pick: '#picker',

	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	
	
	var wall_img;
	uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	    		'<div class="content_one"><img src="'+$('#img1').val()+'" class="content_one1"><div style="position:relative; overflow:hidden;"><img src="" id="pic_wall_list" style="max-width:50%; border:#CCC 1px solid; margin-left:3%"><div class="content_send">点击确认发送</div></div> </div>'
	            ),
	     $img = $li.find('#pic_wall_list');
	    // $list为容器jQuery实例
	    $('.msg').append($li);
	    wall_img=$li;
	    // 创建缩略图
	    // 如果为非图片文件,可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }

	        $img.attr( 'src', src );
	 	   var height= $(document).height();
		   $(document).scrollTop(height);
	    }, 100,  100);
	});
	uploader.on( 'uploadAccept', function( file, res ) {
		//alert(wall_img);
		var pic_url=res._raw;
		send=$(wall_img).find(".content_send").click(function(){
			var _this=this;
			$.ajax({
				url:"index.php?g=Wap&m=Store&a=do_put_wall_img",
				type:"post",
				dataType:"json",
				data:"pic_url="+pic_url,
				success:function(data){
					if(data=="success"){
						$(_this).html("发送成功");
						$(_this).unbind("click"); 
					}
				}
			});
		});
		
		
	})

上传图片,上传完成后返回值进行处理。

你可能感兴趣的:(百度 Web Uploader试用)