Javascript и форма

jooorooo

Registered
такам значи имам следния код:

Код:
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makeRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { 
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
   function get(obj) {
      var getstr = "?";
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
			if (obj.childNodes[i].type == "file") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            }
         }   
         
         
      }
      makeRequest('get.php', getstr);
   }
</script>




<form action="javascript:get(document.getElementById('formid1'));" name="formid1" id="formid1">
<input type="file" name="id1"> 
<input type="submit" name="button" value="Normal Submit Button">
</form>

<form action="javascript:get(document.getElementById('formid2'));" name="formid2" id="formid2">
<input type="file" name="id2"> 
<input type="submit" name="button" value="Normal Submit Button">
</form>

<br><br>
<br>1
<span name="myspan" id="myspan"></span>

като при натискане на някой от бутоните за субмитване се показва резултата в <span name="myspan" id="myspan"></span>
та въпроса е как да направя, всяка една форма да си има отделно <span name="myspan" id="myspan"></span> и след субмитване да изчезва полето+ бутона.
 
аз ти предалгам да не са с еднакви имена тези ИД-та на спан-а
id="myspan_1" и id="myspan_2" според мен ще е по добре
сложи още 1 аргумент на тази функция makeRequest , (всъщност аргумент трябва да сложиш и на get(obj, арг ИД) ) на която подаваш myspan_1 , myspan_2 .. myspan_n ,

а за скриването на формата може да използваш отново ИД-то на формата
накяде след http_request.send(null); да сложиш
document.getElementsById(forma id ).style.display='none';
наи вероятно и това ИД ще трябва да го предаваш между различните функции като аргумент.
 
МММ ако мислиш, че нещо разбрах. :oops: Много куца работа, трябва да взема да го науча това накрая. до са пробвах какви ли не методи и не мога да го направя :?

Значи целта ми е такава, да направя уплоад на файлове, като всеки файл е с отделна форма, поне така го замислям, че по друг начин не можах да измисля с тоя код. и да показва качената снимка на мястото на поплето за избор на файл.
 
Код:
<script type="text/javascript" language="javascript">
   var http_request = false;
   var spanid = '';
   function makeRequest(url, parameters,spanidx) {
   spanid = spanidx;
      http_request = false;
      if (window.XMLHttpRequest) {
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {

      if (http_request.readyState == 4) {
	        if (http_request.status == 200) {
            //alert(http_request.responseText);
			result = http_request.responseText;
            document.getElementById(spanid).innerHTML = result;   
	         } else {
            alert('There was a problem with the request.');
         }
      }
	 
   }
   
   function get(obj,spanid) {
      var getstr = "?";
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
		 obj.childNodes[i].style.display = 'none';
         if (obj.childNodes[i].type == "file") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
			   obj.childNodes[i].style.display = 'none';
			     }
         }   
         
         
      }
      makeRequest('get.php', getstr,spanid);
   }
</script>
<form action="javascript:get(document.getElementById('formid1'),'spanid1');" name="formid1" id="formid1"  >
<input type="file" name="id1">
<input type="submit" name="button" value="Normal Submit Button">
<span name="myspan" id="spanid1">s</span>
</form>

<form action="javascript:get(document.getElementById('formid2'),'spanid2');" name="formid2" id="formid2">
<input type="file" name="id2">
<input type="submit" name="button" value="Normal Submit Button">
<span name="myspan" id="spanid2"></span>
</form>
<br><br>
<br>1

мм ето надявам се ,че работи на бързо го пиша ама ще му хванеш цаката :)
 
:-) благодаря baf :-) екстра е направо. Мда, не било толкова сложно, ама като не съм се занимавал кой знае колко много с JS/Ajax
 
ха и аз бях почнал да го правя но ми даваше грешка при
http_request.onreadystatechange = alertContents(спан ид);
изобщо не се сетих да го декларирам извън функцията и да се присвоява ;)
 
ох точно тая простотия преди време ако знаеш колко съм я псувал..
Говоря за глобалната променлива..
бях се чудел как да вадя променлива вън от функция...
 
хъм и пoследно тази функция

Код:
   function get(obj,spanid) {
      var getstr = "?";
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
       obj.childNodes[i].style.display = 'none';
         if (obj.childNodes[i].type == "file") {
               getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            obj.childNodes[i].style.display = 'none';
              }
         }   
         
         
      }
      makeRequest('get.php', getstr,spanid);
   }

не става за фаилове. пробвах да я преправя, ма нестава. по-скоро не мога :oops: само на GET ми работи тя в момента

П.П. оправих се :D

Благодаря ви много
 
ами мдам :)
трябва ти някой друг хедър да се прати ^^
абе нямам много време в момента затова ето ти едно готово вземи си нещата които ти трябват.
http://www.captain.at/ajax-file-upload.php
 
разгледай http://www.captain.at/ajax-file-upload.php и по специално

// prepare the MIME POST data
var boundaryString = 'capitano';
var boundary = '--' + boundaryString;
var requestbody = boundary + '\n'
+ 'Content-Disposition: form-data; name="mytext"' + '\n'
+ '\n'
+ mytext + '\n'
+ '\n'
+ boundary + '\n'
+ 'Content-Disposition: form-data; name="myfile"; filename="'
+ filename + '"' + '\n'
+ 'Content-Type: application/octet-stream' + '\n'
+ '\n'
+ escape(binary.readBytes(binary.available()))
+ '\n'
+ boundary;

document.getElementById('sizespan').innerHTML =
"requestbody.length=" + requestbody.length;

// do the AJAX request
http_request.onreadystatechange = requestdone;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "multipart/form-data; \
boundary=\"" + boundaryString + "\"");
http_request.setRequestHeader("Connection", "close");
http_request.setRequestHeader("Content-length", requestbody.length);

http_request.send(requestbody);

според мен това е отговора на загадката :shock:
 
ем дюд
и това ако не хелп се оправяш сам :)
Код:
<script type="text/javascript" language="javascript">
   var http_request = false;
   var spanid = '';
	function makeReques(file,filename,spanidx) {
	// request more permissions
	spanid = spanidx;

	http_request = false;
	http_request = new XMLHttpRequest();
	if (!http_request) {
		alert('Cannot create XMLHTTP instance');
		return false;
	}
	// prepare the MIME POST data
	var boundaryString = 'capitano';
	var boundary = '--' + boundaryString;
	var requestbody = boundary + '\n' 
	+ 'Content-Disposition: form-data; name="file"; filename="' 
		+ filename + '"' + '\n' 
	+ 'Content-Type: application/octet-stream' + '\n' 
	+ '\n'	
	+ '\n'
	+ boundary;
	
	// do the AJAX request
	http_request.onreadystatechange = alertContents;
	http_request.open('POST', file, true);
	http_request.setRequestHeader("Content-type", "multipart/form-data; \
		boundary=\"" + boundaryString + "\"");
	http_request.setRequestHeader("Connection", "close");
	http_request.setRequestHeader("Content-length", requestbody.length);
	http_request.send(requestbody);

}
   function alertContents() {

      if (http_request.readyState == 4) {
           if (http_request.status == 200) {
            //alert(http_request.responseText);
         result = http_request.responseText;
            document.getElementById(spanid).innerHTML = result;   
            } else {
            alert('There was a problem with the request.');
         }
      }
   
   }
   
   function get(obj,spanid) {
      var getstr = "?";
      for (i=0; i<obj.childNodes.length; i++) {
         if (obj.childNodes[i].tagName == "INPUT") {
       obj.childNodes[i].style.display = 'none';
         if (obj.childNodes[i].type == "file") {
               getstr = obj.childNodes[i].value ;
            obj.childNodes[i].style.display = 'none';
              }
         }   
         
         
      }
      makeReques('get.php', getstr,spanid);
   }
</script>
<form action="javascript:get(document.getElementById('formid1'),'spanid1');" name="formid1" id="formid1"  >
<input type="file" name="id1">
<input type="submit" name="button" value="Normal Submit Button">
<span name="myspan" id="spanid1"></span>
</form>
<form action="javascript:get(document.getElementById('formid2'),'spanid2');" name="formid2" id="formid2">
<input type="file" name="id2">
<input type="submit" name="button" value="Normal Submit Button">
<span name="myspan" id="spanid2"></span>
</form>
<br><br>
<br>1
 
мерси много. но за жалост пан нестава. направих го по малко селски начин но раноти :D

index.php

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" lang="bg">
<head>
	<title>Ajax File Upload</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>


<script type="text/javascript">
	function resultadoUpload(method, file, formid) {

	var link = '<br /><br /><a href="index.php">Качи друг файл</a>';

	if (method == 0) var saobshtenie = 'Файла <a href="archs/' + file + '" target="_blank">' + file + '</a> е качен' + link;
	if (method == 1) var saobshtenie = 'Error ! - Грешна команда' + link;
	if (method == 2) var saobshtenie = 'Error ! - Неизвестен тип файл' + link;
	if (method == 3) var saobshtenie = 'Error ! - Файлът не беше качен' + link;

	document.getElementById(formid).innerHTML=saobshtenie;
	}
</script>

<style>
.formUpload {
	width: 600px;
	height: 60px;
	border: 1px solid #aaa;
	background: #EEE;
	padding: 5px;
}

.formUpload input {border: 1px solid #AAA}
</style>

</head>

<body>
<div id="formUpload1" class="formUpload">
	<form method="post" enctype="multipart/form-data" action="ups.php" target="iframeUpload">
				<input type="hidden" name="formid" value="formUpload1">
				<input type="hidden" name="fn" value="1">
		fail: <input name="fileUpload1" type="file" /> <input type="submit" onclick="javascript: submit();" />
		<br /><iframe name="iframeUpload" style="display:none"></iframe>
	</form>
	</body>
</div>
<br><br>
<div id="formUpload2" class="formUpload">
	<form method="post" enctype="multipart/form-data" action="ups.php" target="iframeUpload">
				<input type="hidden" name="formid" value="formUpload2">
				<input type="hidden" name="fn" value="2">
		fail: <input name="fileUpload2" type="file" /> <input type="submit" onclick="javascript: submit();" />
		<br /><iframe name="iframeUpload" style="display:none"></iframe>
	</form>
	</body>
</div>

</html>

ups.php

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" lang="bg">
<head>
	<title>Ajax File Upload</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>

<body>
<?php
	$fn=$_POST['fn'];
	$tipo = substr($_FILES['fileUpload'.$fn]['type'], 0, 5);
	$formid=$_POST['formid'];
	$dir = 'archs/';
	if (isset($_FILES['fileUpload'.$fn]['tmp_name'])) {
		if ($tipo == 'image') {
			if (!copy($_FILES['fileUpload'.$fn]['tmp_name'], $dir.$_FILES['fileUpload'.$fn]['name']))
				echo '<script>parent.resultadoUpload (\'3\', \''.$_FILES['fileUpload'.$fn]['name'].'\', \''.$formid.'\');</script>';
			else 
				echo '<script>parent.resultadoUpload (\'0\', \''.$_FILES['fileUpload'.$fn]['name'].'\', \''.$formid.'\');</script>';
		}
		echo '<script>parent.resultadoUpload (\'2\', \''.$_FILES['fileUpload'.$fn]['name'].'\', \''.$formid.'\');</script>';
	}
	echo '<script>parent.resultadoUpload (\'1\', \''.$_FILES['fileUpload'.$fn]['name'].'\', \''.$formid.'\');</script>';


	?>
</body>
 
хм що бе при мен масива $_FILES ми го изкара и си копираше файла ок. Не знам при теб защо не става...
Ама щом си се оправил..
 
постоянно ми изкарваше
Код:
"There was a problem with the request."

пак ще го пробвам, е ми се струва, че по начина който го направих че рефрешва страницатта. но не мога да го усетя просто.
 
хм странно дъни се на :
if (http_request.status == 200) {

което значи ,че има проблем с взимането на данните т.е. сървара НЕ връща статус 200 когато всичко е ок.
Може да пробваш да алертнеш http_request.status да видим какво ще ти върне...
А и кажи браузъра ..аз пробвах на мозилата и си беше ок..

Тоя статус може да ти върне пр 404 т.е. "Not Found" (не е намерено) или там както се превежда...
 
На IE ми показва знака "внимание" в ъгъла на браузера и нищо не става, а на FF ми връща съобщението от предния пост.

В IE пише, че грешката е тук:

Код:
   http_request.setRequestHeader("Content-type", "multipart/form-data; \ 
      boundary=\"" + boundaryString + "\"");

74-ти символ, или което се пада тук

Код:
   http_request.setRequestHeader("Content-type", "multipart/form-data; \
има празно поле след "\" и то е номер 74

това май го оправих, заради пренасянето на новия ред, но сега дава, че ред 9-ти
Код:
   http_request = new XMLHttpRequest();

XMLHttpRequest <- не е дифинирано


промених
Код:
http_request = new XMLHttpRequest();
с
Код:
   if (window.XMLHttpRequest)
	{
	http_request=new XMLHttpRequest();
	}
	// code for IE
	else if (window.ActiveXObject)
	{
	http_request=new ActiveXObject("Microsoft.XMLHTTP");
	}
и работи :-)

Хиляди благодарности :-)
 

Back
Горе