<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="bootstrap/FileUpload/bootstrap-fileupload.css" type="text/css" /> <link href="bootstrap/FileUpload/bootstrap-fileupload.js" type="text/javascript" /> <script src="http://code.jquery.com/jquery-1.7.min.js" ></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script> <link href="bootstrap1/js/bootstrap.js" rel="stylesheet"> <link href="bootstrap1/js/bootstrap.min.js" rel="stylesheet"> <link href="bootstrap1/css/bootstrap.css" rel="stylesheet"> <link href="bootstrap1/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap1/css/bootstrap-responsive.css" rel="stylesheet"> <link href="bootstrap1/css/bootstrap-responsive.min.css" rel="stylesheet"> </head> <body> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input span3"> <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div><span class="btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span> <input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div> </div> </body> </html>
/*! * Bootstrap v2.3.1-j6 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world by @mdo and @fat, extended by @ArnoldDaniels. */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btn-file { overflow: hidden; position: relative; vertical-align: middle; } .btn-file > input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); transform: translate(-300px, 0) scale(4); font-size: 23px; direction: ltr; cursor: pointer; } .fileupload { margin-bottom: 9px; } .fileupload .uneditable-input { display: inline-block; margin-bottom: 0px; vertical-align: middle; cursor: text; } .fileupload .thumbnail { overflow: hidden; display: inline-block; margin-bottom: 5px; vertical-align: middle; text-align: center; } .fileupload .thumbnail > img { display: inline-block; vertical-align: middle; max-height: 100%; } .fileupload .btn { vertical-align: middle; } .fileupload-exists .fileupload-new, .fileupload-new .fileupload-exists { display: none; } .fileupload-inline .fileupload-controls { display: inline; } .fileupload-new .input-append .btn-file { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .thumbnail-borderless .thumbnail { border: none; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .fileupload-new.thumbnail-borderless .thumbnail { border: 1px solid #ddd; } .control-group.warning .fileupload .uneditable-input { color: #a47e3c; border-color: #a47e3c; } .control-group.warning .fileupload .fileupload-preview { color: #a47e3c; } .control-group.warning .fileupload .thumbnail { border-color: #a47e3c; } .control-group.error .fileupload .uneditable-input { color: #b94a48; border-color: #b94a48; } .control-group.error .fileupload .fileupload-preview { color: #b94a48; } .control-group.error .fileupload .thumbnail { border-color: #b94a48; } .control-group.success .fileupload .uneditable-input { color: #468847; border-color: #468847; } .control-group.success .fileupload .fileupload-preview { color: #468847; } .control-group.success .fileupload .thumbnail { border-color: #468847; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script href="bootstrap1/js/bootstrap.min.js" rel="stylesheet"></script> <link href="bootstrap1/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap1/css/bootstrap-responsive.min.css" rel="stylesheet"> </head> <body> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input span3"> <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div><span class="btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span> <input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div> </div> <link href="bootstrap/FileUpload/bootstrap-fileupload.css" type="text/css" /> <script src="bootstrap/FileUpload/bootstrap-fileupload.js" type="text/javascript"></script> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script href="bootstrap1/js/bootstrap.min.js" rel="stylesheet"></script> <link href="bootstrap1/css/bootstrap.min.css" rel="stylesheet"> <link href="bootstrap1/css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="bootstrap/FileUpload/bootstrap-fileupload.css" rel="stylesheet" /> </head> <body> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i><span class="fileupload-preview"></span></div> <span class="btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span> <input type="file"></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div> </div> <script src="http://code.jquery.com/jquery-1.7.min.js" ></script> <script src="bootstrap/FileUpload/bootstrap-fileupload.js" type="text/javascript"></script> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
