-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2-1.html
50 lines (46 loc) · 2.28 KB
/
2-1.html
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class=" col-sm-2"></div>
<div id="bg"class="container bg-info col-sm-7">
<label class="badge badge-primary">表題</label>
<input type="text" class="form-control " id="title"placeholder="タイトル名">
<div class="form-group ">
<label class="badge badge-primary">画像の横幅</label>
<input type="number" class="form-control" id="imgwidth" min="1" value="800"placeholder="800">
<p class="control-label"><b>本の綴じ方向</b></p>
<label class="badge badge-primary">ページ方向</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="binding-rtl" value="radio1" checked="">右から左</label>
<label class="checkbox-inline"><input type="radio" name="radio" id="binding-ltr" value="radio2">左から右</label>
</div>
<label class="badge badge-primary">表紙画像</label>
<input type="file" id="coverfile" name="coverfile" accept="image/png,image/jpeg"><br>
<img id="cover">
<label class="sr-only" for="InputSelect">選択</label>
<select class="form-control" id="InputSelect2" name= "selectNav">
<option>本文の選択</option>
</select>
<button id="demo" class="btn btn-warning">保存</button>
</div>
<script>
coverfile = document.getElementById('coverfile');
coverfile.addEventListener('change', function (e) {
var f = e.target.files[0]
var reader = new FileReader();
reader.onload = function (evt) {
var image = document.getElementById('cover')
image.src = evt.target.result;
}
reader.readAsDataURL(f);
});
</script>
</body>
</html>