ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Jquery. ajaxForm без кнопки submit
3 сообщений из 3, страница 1 из 1
Jquery. ajaxForm без кнопки submit
    #38921805
Sabyrov.Talgat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Sabyrov.Talgat
Гость
На странице html следующий код
Код: 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.
<html>
<head>
	<title>Ajax Image Upload | Packetcode</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css" >
	<Script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js" ></script>
	<script src="http://malsup.github.com/jquery.form.js"></script> 
	<script src="script.js"></script>
</head>	
<body>
	<div class="container-main">
<h1>Ajax Image Uploder</h1>
<p>A simple tutorial to explain image uploading using jquery ajax and php</p>

<form action="upload.php" method="post" id="myForm"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" class="btn btn-success" value="Upload Image">
</form>

<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" 
  aria-valuemax="100" style="width: 0%">
    <span class="sr-only">0% Complete</span>
  </div>
</div>
<div class="image"></div>
</div>
</body>
</html>



А в script.js:
Код: javascript
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.
$(function(){
	 
	 // function from the jquery form plugin
	 $('#myForm').ajaxForm({
	 	beforeSend:function(){
	 		 $(".progress").show();
	 	},
	 	uploadProgress:function(event,position,total,percentComplete){
	 		$(".progress-bar").width(percentComplete+'%'); //dynamicaly change the progress bar width
	 		$(".sr-only").html(percentComplete+'%'); // show the percentage number
	 	},
	 	success:function(){
	 		$(".progress").hide(); //hide progress bar on success of upload
	 	},
	 	complete:function(response){
	 		if(response.responseText=='0')
	 			$(".image").html("Error"); //display error if response is 0
	 		else
	 			$(".image").html("<img src='"+response.responseText+"' width='100%'/>");
	 			// show the image after success
	 	}
	 });

	 //set the progress bar to be hidden on loading
	 $(".progress").hide();
});



Код выполняет загрузку файла на сервер без перезагрузки страницы с прогрессбар.
Но он работает только с submit. Можно ли сделать без submit? Чтоб метод выполнялся сразу при выборе файла.
...
Рейтинг: 0 / 0
31.03.2015, 05:20
| Ответить | Цитировать | Написать  
Jquery. ajaxForm без кнопки submit
    #38921869
Фотография Areostar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Areostar
Участник
Sabyrov.TalgatНа странице html следующий код
Код: 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.
<html>
<head>
	<title>Ajax Image Upload | Packetcode</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css" >
	<Script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js" ></script>
	<script src="http://malsup.github.com/jquery.form.js"></script> 
	<script src="script.js"></script>
</head>	
<body>
	<div class="container-main">
<h1>Ajax Image Uploder</h1>
<p>A simple tutorial to explain image uploading using jquery ajax and php</p>

<form action="upload.php" method="post" id="myForm"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" class="btn btn-success" value="Upload Image">
</form>

<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" 
  aria-valuemax="100" style="width: 0%">
    <span class="sr-only">0% Complete</span>
  </div>
</div>
<div class="image"></div>
</div>
</body>
</html>



А в script.js:
Код: javascript
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.
$(function(){
	 
	 // function from the jquery form plugin
	 $('#myForm').ajaxForm({
	 	beforeSend:function(){
	 		 $(".progress").show();
	 	},
	 	uploadProgress:function(event,position,total,percentComplete){
	 		$(".progress-bar").width(percentComplete+'%'); //dynamicaly change the progress bar width
	 		$(".sr-only").html(percentComplete+'%'); // show the percentage number
	 	},
	 	success:function(){
	 		$(".progress").hide(); //hide progress bar on success of upload
	 	},
	 	complete:function(response){
	 		if(response.responseText=='0')
	 			$(".image").html("Error"); //display error if response is 0
	 		else
	 			$(".image").html("<img src='"+response.responseText+"' width='100%'/>");
	 			// show the image after success
	 	}
	 });

	 //set the progress bar to be hidden on loading
	 $(".progress").hide();
});



Код выполняет загрузку файла на сервер без перезагрузки страницы с прогрессбар.
Но он работает только с submit. Можно ли сделать без submit? Чтоб метод выполнялся сразу при выборе файла.

Мне кажется должно быть событие на выбор файла(погуглите)

и тогда в перехватчике пропишите submit
...
Рейтинг: 0 / 0
31.03.2015, 09:07
| Ответить | Цитировать | Написать  
Jquery. ajaxForm без кнопки submit
    #38922237
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
carrotik
Участник
Sabyrov.Talgat,

...вероятно, как-то так
start-upload-after-choosing-a-file-using-jquery
...
Рейтинг: 0 / 0
31.03.2015, 12:30
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Jquery. ajaxForm без кнопки submit
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1446137]:
 0ms
get settings:
 10ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 179ms
get topic data:
 11ms
get first new msg:
 6ms
get forum data:
 2ms
get page messages:
 39ms
get tp. blocked users:
 1ms
others: 242ms
total:  514ms
созд. / загр.: 514ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]