125 lines
4.2 KiB
HTML
125 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>上传图片</title>
|
|
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
|
|
<link href="/css/plugin.css" rel="stylesheet" type="text/css">
|
|
|
|
<style>
|
|
#upload_target {border:0; margin:0; padding:0; width:0; height:0; display:none;}
|
|
.upload_infobar {display:none; font-size:12pt; background:#fff; margin-top:10px; border-radius:5px;}
|
|
.upload_infobar img.spinner {margin-right:10px;}
|
|
.upload_infobar a {color:#0000cc;}
|
|
#upload_additional_info {font-size:10pt; padding-left:26px;}
|
|
|
|
#the_plugin_name {margin:15px 0 0 0;}
|
|
#the_plugin_name, #the_plugin_name a {color:#777; font-size:9px;}
|
|
#the_plugin_name a {text-decoration:none;}
|
|
#the_plugin_name a:hover {color:#333;}
|
|
|
|
/* this class makes the upload script output visible */
|
|
.upload_target_visible {width:100%!important; height:200px!important; border:1px solid #000!important; display:block!important}
|
|
|
|
/*-------------*/
|
|
#dropbox{
|
|
border-radius:3px;
|
|
position: relative;
|
|
min-height: 200px;
|
|
overflow: hidden;
|
|
padding-bottom: 40px;
|
|
border: 1px solid #ccc;
|
|
width: 100%;
|
|
background-color:#eee;
|
|
}
|
|
#dropbox .message {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
padding-top: 80px;
|
|
display: block;
|
|
}
|
|
#dropbox .message i {
|
|
color:#ccc;
|
|
font-size:10px;
|
|
}
|
|
#dropbox:before {
|
|
border-radius:3px 3px 0 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<ul id="myTab" class="nav nav-tabs">
|
|
<li class="active"><a href="#upload" data-toggle="tab">上传图片</a></li>
|
|
<li class=""><a href="#url" data-toggle="tab">图片URL</a></li>
|
|
</ul>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
|
|
<div class="tab-pane active" id="upload" style="margin-top: 10px;">
|
|
<!--ci/index.php/upload/english-->
|
|
<form class="form-inline" id="upl" name="upl" action="/file/uploadImage" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="jbImagesDialog.inProgress();">
|
|
|
|
<div id="upload_in_progress" class="upload_infobar">
|
|
<img src="img/spinner.gif" width="16" height="16" class="spinner">Upload in progress…
|
|
<div id="upload_additional_info"></div>
|
|
</div>
|
|
|
|
<div id="upload_infobar" class="alert alert-warning" style="display: none; margin-bottom: 10px;"></div>
|
|
|
|
<p id="upload_form_container">
|
|
<input id="uploader" name="file" type="file" class="form-control" onChange="document.upl.submit(); jbImagesDialog.inProgress();">
|
|
</p>
|
|
</form>
|
|
<iframe id="upload_target" name="upload_target" src="#"></iframe>
|
|
|
|
<div id="dropbox">
|
|
<div class="message">
|
|
或将图片拖到这里上传.
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="url" style="margin-top: 10px;">
|
|
<form class="form-inline" id="imageSrc2">
|
|
<table style="width: 100%">
|
|
<tr>
|
|
<th style="width: 50px"><label for="imageSrc">地址</label></th>
|
|
<td><input type="url" id="imageSrc" name="src" class="form-control"></td>
|
|
</tr>
|
|
<tr>
|
|
<th><label for="imageWidth">大小</label></th>
|
|
<td>
|
|
<input type="text" class="form-control" id="imageWidth" name="width" style="width: 100px; display: inline-block"/>
|
|
X
|
|
<input type="text" class="form-control" id="imageHeight" name="height" style="width: 100px; display: inline-block"/>
|
|
<label>
|
|
<input type="checkbox" checked="checked" id="autoScale"/>
|
|
按比例缩放
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bottomBtns">
|
|
<div>
|
|
<button class="btn btn-success" id="insertCodeBtn" onclick="insertImage();">确定</button>
|
|
<button class="btn btn-default" id="closeBtn" onclick="closeWin()">关闭</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/jquery-1.9.0.min.js"></script>
|
|
<script src="/js/bootstrap.js"></script>
|
|
<script type="text/javascript" src="js/dialog.js"></script>
|
|
<script type="text/javascript" src="js/jquery.filedrop.js"></script>
|
|
<script type="text/javascript" src="js/drop.js"></script>
|
|
</body>
|
|
</html> |