html中图片上传怎么写,HTML中上传与读取图片或文件（input file）

1

2

3

4

5

6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

7

8

Document

9

10 .kuang{

11 display:inline-block;

12 vertical-align:middle;

13 box-shadow:inset 0px 1px 20px 5px #ddd;

14 text-align:left;

15 margin-right:20px;

16 margin-bottom:20px;

17 width:165px;

18 height:165px;

19 }

20 .addhao{

21 width:165px;

22 height:165px;

23 background:url(../img/add_photo_plus.png);

24 }

25 .on{

26 display:inline-block;

27 text-align:left;

28 margin-right:20px;

29 margin-bottom:20px;

30 width:165px;

31 height:165px;

32 display:none;

33 position:relative;

34 overflow:hidden;

35 line-height:200px;

36 }

37 .xian{

38 width:165px;

39 height:165px;

40 position:absolute;

41 background-image:linear-gradient(42 0deg,43 rgba(0,0,0,0.7) 50%,44 transparent 50%45 );

46 background-size:165px 4px;

47 display:none;

48 z-index:2;

49 }

50 .chahao{

51 position:absolute;

52 width:60px;

53 height:60px;

54 background:url(../img/ico_02.png);

55 background-position:-171px -158px;

56 top:52.5px;

57 left:52.5px;

58 display:none;

59 z-index:2;

60 }

61 .on img{

62 width:100%;

63 height:auto;

64 position:absolute;

65 left:0;

66 right:0;

67 top:0;

68 bottom:0;

69 margin:auto;

70 }

71 .kuang input{

72 width:164px;

73 height:164px;

74 opacity:0;

75 }

76 .button{

77 width:500px;

78 height:36px;

79 margin:0 auto;

80

81 }

82 .button .set{

83 float:left;

84 width:216px;

85 height:36px;

86 background:#ddd;

87 text-align:center;

88 position:relative;

89 }

90 .set input{

91 width:216px;

92 height:36px;

93 opacity:0;

94 position:absolute;

95 top:0;

96 left:0;

97 }

98 .button .next{

99 float:right;

100 width:216px;

101 height:36px;

102 background:red;

103 color:white;

104 }

105 .bigk{

106 width:1000px;

107 margin:0 auto;

108 text-align:center;

109 }

110

111

112

113

114

115

116

117

118