<!--引入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