百度 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"); 
					}
				}
			});
		});
		
		
	})

上傳圖片,上傳完成後返回值進行處理。javascript

相關文章
相關標籤/搜索