目标检测web端网页代码

最新推荐文章于 2024-09-24 19:46:42 发布

苝柠帞寒

最新推荐文章于 2024-09-24 19:46:42 发布

阅读量1.6k

点赞数 1

本文介绍了一个基于HTML和JavaScript的文件上传系统，该系统允许用户上传特定类型的文件（如jpg、png、gif），并提供了文件预览功能。通过使用jQuery和自定义脚本，实现了文件选择、上传和进度指示等功能。

摘要由CSDN通过智能技术生成

<!doctype html>

目标检测

1 2 3 4 5

    <form enctype="multipart/form-data">
        <div class="form-group">
            <input id="file-select" type="file" >
        </div>
    </form>
    <form enctype="multipart/form-data">
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
	
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/fileinput.js" type="text/javascript"></script>
<script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
<script>
    $("#file-select").fileinput({
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions : ['jpg', 'png','gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
	});
	</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 css .container{ padding-right:0px; padding-left:15px; margin-right:0px; margin-left:0px;

}

.dataFrame{
border:1px solid #dddddd;
width:30%;
height:400px;
float:right;
margin-left:50px;
margin-top:0px;
display:inline;
border-radius:5px
}
.form-group {
margin-right: 0px;

}

.file-input {
overflow-x: auto;
}

.file-loading {
top: 0;
right: 0;
width: 25px;
height: 25px;
font-size: 999px;
text-align: right;
color: #fff;
background: transparent url(’…/img/loading.gif’) top left no-repeat;
border: none;
}

.btn-file {
position: relative;
overflow: hidden;
}

.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
background: none repeat scroll 0 0 transparent;
cursor: inherit;
display: block;
}

.file-caption .glyphicon {
display: inline-block;
min-width: 18px;
margin-top: 2px;
}

.file-caption-name {
display: inline-block;
overflow: hidden;
max-height: 20px;
padding-right: 10px;
word-break: break-all;
}

.file-caption-ellipsis {
position: absolute;
right: 10px;
margin-top: -6px;
font-size: 1.2em;
display: none;
font-weight: bold;
cursor: default;
}

.kv-has-ellipsis .file-caption-ellipsis {
display: inline;
}

.kv-has-ellipsis {
padding-right: 17px;
}

.kv-search-container .kv-search-clear {
position: absolute;
padding: 10px;
right: 0px;
}

.file-error-message {
background-color: #f2dede;
color: #a94442;
text-align: center;
border-radius: 5px;
padding: 5px;
}

.file-error-message pre, .file-error-message ul {
margin: 5px 0;
text-align: left;
}

.file-caption-disabled {
background-color: #EEEEEE;
cursor: not-allowed;
opacity: 1;
}

.file-input .btn[disabled], .file-input .btn .disabled {
cursor: not-allowed;
}

.file-preview {
border-radius: 5px;
border: 1px solid #ddd;
padding: 5px;
width: 70%;
height: 400px;
margin-bottom: 5px;
}

.file-preview-frame {
display: table;
margin: 8px;
height: 160px;
border: 1px solid #ddd;
box-shadow: 1px 1px 5px 0px #a2958a;
padding: 6px;
float: left;
text-align: center;
vertical-align: middle;
}

.file-preview-frame:hover {
box-shadow: 3px 3px 5px 0px #333;
}

.file-preview-image {
height: 160px;
vertical-align: text-bottom;
}

.file-preview-text {
width: 160px;
color: #428bca;
font-size: 11px;
text-align: center;
}

.file-preview-other {
padding-top: 48px;
text-align: center;
}

.file-preview-other i {
font-size: 2.4em;
}

.file-other-error {
width: 100%;
padding-top: 30px;
text-align: right
}

.file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file,
.file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button,
.file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button {
display: none;
}

.loading {
background: transparent url(’…/img/loading.gif’) no-repeat scroll center center content-box !important;
}

.wrap-indicator {
font-weight: bold;
color: #245269;
cursor: pointer;
}

.file-actions {
text-align: left;
}

/.file-footer-buttons {
float: right;
}/

.file-caption-name {
padding-top: 4px;
font-size: 11px;
color: #777;
}

.file-drop-zone {
border: 1px dashed #aaa;
border-radius: 4px;
height: 95%;
text-align: center;
vertical-align: middle;
margin: 12px 15px 12px 12px;
padding: 5px;
}

.file-drop-zone-title {
color: #aaa;
font-size: 40px;
padding: 85px 10px;
}

wuh.pzi.cn