UNPKG

fileapi/examples/userpic.html

Version:

1<!DOCTYPE html>
2<!--
3
4
         ~~~ Это пример создания загрузки upserpic ~~~
                     (NativeJS + FileAPI)
7
8
  1. Скопируйте исходники себе в проект
  2. Разместите crossdomain.xml на домене, куда будут грузиться файлы
  3. Укажите путь к флешкам, он задаётся через "staticPath"
  4. ...
  5. Profit!
14
15
16-->
17<html>
18<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
21
<meta name="viewport" content="user-scalable=no, width=400, initial-scale=0.8, maximum-scale=0.8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="yes" />
<meta name="format-detection" content="email=no" />
<meta name="HandheldFriendly" content="true" />
27
<title>FileAPI :: UserPic :: example</title>
29
<script>
// Объект настройки
var FileAPI = {
	debug: false, // режим отладки
	staticPath: '../dist/' // путь до флешек
};
</script>
<script src="../dist/FileAPI.min.js"></script>
38
<style>
body {
font-size: 15px;
font-family: "Helvetica Neue";
}
44
45
.upload-link {
color: #36c;
display: inline-block;
*zoom: 1;
*display: inline;
overflow: hidden;
position: relative;
text-decoration: none;
background-color: #fff;
background-color: rgba(255,255,255,.85);
padding: 3px 8px;
}
.upload-link__txt {
	z-index: 1;
	position: relative;
	border-bottom: 1px dotted #36c;
}
	.upload-link:hover .upload-link__txt {
		color: #f00;
		border-bottom-color: #f00;
	}
67
.upload-link__inp {
	top: -10px;
	right: -40px;
	z-index: 2;
	position: absolute;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	font-size: 50px;
}
78
79
.upload {
	width: 230px;
	height: 200px;
	border: 2px solid #ccc;
	position: relative;
	background-color: #fff;
}
	.upload__preview {
		-webkit-transition: opacity .3s ease;
		-moz-transition: opacity .3s ease;
		transition: opacity .3s ease;
	}
92
	.upload__progress {
		color: #fff;
	}
96
	.upload__link,
	.upload__progress {
		top: 45%;
		width: 100%;
		position: absolute;
		text-align: center;
	}
104
	.upload__progress,
	.upload_active .upload__link { display: none; }
107
	.upload_active .upload__preview { opacity: .75; }
	.upload_active .upload__progress { display: block; }
</style>
111</head>
112<body>
<div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">
<div style="padding: 5px 10px 10px">
	<a href="../">&larr; index</a> |
	<a href="./demo.html">demo</a> -
	<b>userpic</b> -
	<a href="./thumbnails.html">thumbnails</a> -
	<a href="./watermark.html">watermark</a> -
	<a href="./webcam.html">webcam</a> -
	<a href="./caman.html">caman.js</a>
</div>
</div>
124
<form name="userpic" class="upload">
<div id="preview" class="upload__preview"></div>
127
<div class="upload__progress">Uploading&hellip;</div>
129
<div class="upload__link">
	<a class="upload-link js-fileapi-wrapper">
		<span class="upload-link__txt">Browse pic</span>
		<input class="upload-link__inp" name="photo" type="file" accept=".jpg,.jpeg,.gif" />
	</a>
</div>
</form>
137
<script>
(function (){
	// Ссылка на uploader
	var form = document.forms.userpic;
142
	// Ссылка на инпут, через который юзер будет выбирать файл
	var input = form.photo;
145
	// Ссылка на DOM-элемент, где будем отображать preview
	var preview = document.getElementById('preview');
148
	// Параметры предварительного просмотра
	var previewOpts = {
		  width:  230
		, height: 200
	};
154
	// Параметры загрузки
	var uploadOpts = {
		  url: '/upload' // куда грузить
		, data: {} // дополнительный POST-параметры
		, name: 'userpic' // название POST-параметра загружаемого файла
		, activeClassName: 'upload_active' // класс, который будем добавлять общему контейнеру при загрузке
	};
162
	// Функция, которая будет срабатывать при выборе файла
	var _onSelectFile = function (evt/**Event*/){
		// Получаем выбранный файл
		var file = FileAPI.getFiles(evt)[0];
167
		if( file ){
			// Строим preview для изображений
			_createPreview(file);
171
			// Загружаем файл на сервер
			_uploadFile(file);
		}
	};
176
	// Функция создающая preview для изображения
	var _createPreview = function (file/**File*/){
		FileAPI.Image(file)
			.preview(previewOpts.width, previewOpts.height)
			.get(function (err, image){
				// Если не было ошибок, то вставляем изображение
				if( !err ){
					// Отчищаем контейнер от текущего изображения
					preview.innerHTML = '';
186
					// Вставляем новое
					preview.appendChild(image);
				}
			})
		;
	};
193
	// Функция загрузки файла на сервер
	var _uploadFile = function (file){
		// Подготавливаем опции для загрузки
		var opts = FileAPI.extend(uploadOpts, {
			files: {},
199
			// событие "начало загрузки"
			upload: function (){
				form.className += ' '+uploadOpts.activeClassName;
			},
204
			// событие "конец загрузки"
			complete: function (err, xhr){
				form.className = (' '+form.className+' ').replace(' '+uploadOpts.activeClassName+' ', ' ');
208
				if( err ){
					alert('Увы, произошла ошибка сервера.');
				} else {
					// всё успешно загрузилось
				}
			}
		});
216
		// Добавляем файл, который будем загружать
		opts.files[opts.name] = file;
219
		// Загружаем на сервер
		FileAPI.upload(opts);
	};
223
	// Подписываемся на событие "change", оно будет срабатывать при выборе файла
	FileAPI.event.on(input, "change", _onSelectFile);
})();
</script>
228</body>
229</html>

1	`<!DOCTYPE html>`
2	`<!--`
3
4
5	`~~~ Это пример создания загрузки upserpic ~~~`
6	`(NativeJS + FileAPI)`
7
8
9	`1. Скопируйте исходники себе в проект`
10	`2. Разместите crossdomain.xml на домене, куда будут грузиться файлы`
11	`3. Укажите путь к флешкам, он задаётся через "staticPath"`
12	`4. ...`
13	`5. Profit!`
14
15
16	`-->`
17	`<html>`
18	`<head>`
19	`<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">`
20	`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
21
22	`<meta name="viewport" content="user-scalable=no, width=400, initial-scale=0.8, maximum-scale=0.8" />`
23	`<meta name="apple-mobile-web-app-capable" content="yes" />`
24	`<meta name="apple-mobile-web-app-status-bar-style" content="yes" />`
25	`<meta name="format-detection" content="email=no" />`
26	`<meta name="HandheldFriendly" content="true" />`
27
28	`<title>FileAPI :: UserPic :: example</title>`
29
30	`<script>`
31	`// Объект настройки`
32	`var FileAPI = {`
33	`debug: false, // режим отладки`
34	`staticPath: '../dist/' // путь до флешек`
35	`};`
36	`</script>`
37	`<script src="../dist/FileAPI.min.js"></script>`
38
39	`<style>`
40	`body {`
41	`font-size: 15px;`
42	`font-family: "Helvetica Neue";`
43	`}`
44
45
46	`.upload-link {`
47	`color: #36c;`
48	`display: inline-block;`
49	`*zoom: 1;`
50	`*display: inline;`
51	`overflow: hidden;`
52	`position: relative;`
53	`text-decoration: none;`
54	`background-color: #fff;`
55	`background-color: rgba(255,255,255,.85);`
56	`padding: 3px 8px;`
57	`}`
58	`.upload-link__txt {`
59	`z-index: 1;`
60	`position: relative;`
61	`border-bottom: 1px dotted #36c;`
62	`}`
63	`.upload-link:hover .upload-link__txt {`
64	`color: #f00;`
65	`border-bottom-color: #f00;`
66	`}`
67
68	`.upload-link__inp {`
69	`top: -10px;`
70	`right: -40px;`
71	`z-index: 2;`
72	`position: absolute;`
73	`cursor: pointer;`
74	`opacity: 0;`
75	`filter: alpha(opacity=0);`
76	`font-size: 50px;`
77	`}`
78
79
80	`.upload {`
81	`width: 230px;`
82	`height: 200px;`
83	`border: 2px solid #ccc;`
84	`position: relative;`
85	`background-color: #fff;`
86	`}`
87	`.upload__preview {`
88	`-webkit-transition: opacity .3s ease;`
89	`-moz-transition: opacity .3s ease;`
90	`transition: opacity .3s ease;`
91	`}`
92
93	`.upload__progress {`
94	`color: #fff;`
95	`}`
96
97	`.upload__link,`
98	`.upload__progress {`
99	`top: 45%;`
100	`width: 100%;`
101	`position: absolute;`
102	`text-align: center;`
103	`}`
104
105	`.upload__progress,`
106	`.upload_active .upload__link { display: none; }`
107
108	`.upload_active .upload__preview { opacity: .75; }`
109	`.upload_active .upload__progress { display: block; }`
110	`</style>`
111	`</head>`
112	`<body>`
113	`<div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">`
114	`<div style="padding: 5px 10px 10px">`
115	`<a href="../">← index</a> \|`
116	`<a href="./demo.html">demo</a> -`
117	`<b>userpic</b> -`
118	`<a href="./thumbnails.html">thumbnails</a> -`
119	`<a href="./watermark.html">watermark</a> -`
120	`<a href="./webcam.html">webcam</a> -`
121	`<a href="./caman.html">caman.js</a>`
122	`</div>`
123	`</div>`
124
125	`<form name="userpic" class="upload">`
126	`<div id="preview" class="upload__preview"></div>`
127
128	`<div class="upload__progress">Uploading…</div>`
129
130	`<div class="upload__link">`
131	`<a class="upload-link js-fileapi-wrapper">`
132	`<span class="upload-link__txt">Browse pic</span>`
133	`<input class="upload-link__inp" name="photo" type="file" accept=".jpg,.jpeg,.gif" />`
134	`</a>`
135	`</div>`
136	`</form>`
137
138	`<script>`
139	`(function (){`
140	`// Ссылка на uploader`
141	`var form = document.forms.userpic;`
142
143	`// Ссылка на инпут, через который юзер будет выбирать файл`
144	`var input = form.photo;`
145
146	`// Ссылка на DOM-элемент, где будем отображать preview`
147	`var preview = document.getElementById('preview');`
148
149	`// Параметры предварительного просмотра`
150	`var previewOpts = {`
151	`width: 230`
152	`, height: 200`
153	`};`
154
155	`// Параметры загрузки`
156	`var uploadOpts = {`
157	`url: '/upload' // куда грузить`
158	`, data: {} // дополнительный POST-параметры`
159	`, name: 'userpic' // название POST-параметра загружаемого файла`
160	`, activeClassName: 'upload_active' // класс, который будем добавлять общему контейнеру при загрузке`
161	`};`
162
163	`// Функция, которая будет срабатывать при выборе файла`
164	`var _onSelectFile = function (evt/*Event/){`
165	`// Получаем выбранный файл`
166	`var file = FileAPI.getFiles(evt)[0];`
167
168	`if( file ){`
169	`// Строим preview для изображений`
170	`_createPreview(file);`
171
172	`// Загружаем файл на сервер`
173	`_uploadFile(file);`
174	`}`
175	`};`
176
177	`// Функция создающая preview для изображения`
178	`var _createPreview = function (file/*File/){`
179	`FileAPI.Image(file)`
180	`.preview(previewOpts.width, previewOpts.height)`
181	`.get(function (err, image){`
182	`// Если не было ошибок, то вставляем изображение`
183	`if( !err ){`
184	`// Отчищаем контейнер от текущего изображения`
185	`preview.innerHTML = '';`
186
187	`// Вставляем новое`
188	`preview.appendChild(image);`
189	`}`
190	`})`
191	`;`
192	`};`
193
194	`// Функция загрузки файла на сервер`
195	`var _uploadFile = function (file){`
196	`// Подготавливаем опции для загрузки`
197	`var opts = FileAPI.extend(uploadOpts, {`
198	`files: {},`
199
200	`// событие "начало загрузки"`
201	`upload: function (){`
202	`form.className += ' '+uploadOpts.activeClassName;`
203	`},`
204
205	`// событие "конец загрузки"`
206	`complete: function (err, xhr){`
207	`form.className = (' '+form.className+' ').replace(' '+uploadOpts.activeClassName+' ', ' ');`
208
209	`if( err ){`
210	`alert('Увы, произошла ошибка сервера.');`
211	`} else {`
212	`// всё успешно загрузилось`
213	`}`
214	`}`
215	`});`
216
217	`// Добавляем файл, который будем загружать`
218	`opts.files[opts.name] = file;`
219
220	`// Загружаем на сервер`
221	`FileAPI.upload(opts);`
222	`};`
223
224	`// Подписываемся на событие "change", оно будет срабатывать при выборе файла`
225	`FileAPI.event.on(input, "change", _onSelectFile);`
226	`})();`
227	`</script>`
228	`</body>`
229	`</html>`