Forum PHP.pl > [AJAX]upload i zastosowanie kilku input file

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [AJAX]upload i zastosowanie kilku input file

kubax33

18.09.2013, 12:46:55

Poniższe rozwiązanie to dynamiczny upload jednak funkcjonuje on tylko do jednego input file, a chciałbym postawić kilka input file, aby każdego osobno ładowało.
Jak to zrobić?

[PHP] pobierz, plaintext 
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
 
#progress 
{
position:relative; 
width:200px; 
border: 1px solid #ddd; 
padding: 1px; 
border-radius: 3px; 
}
#bar 
{ 
background-color: #B4F5B4;
width:0%; 
height:20px; 
border-radius: 3px; 
}
 
#percent 
{ 
position:absolute; 
display:inline-block; 
top:3px; 
left:48%; 
}
</style>
</head>
<body>
 
<form id="myForm" name=upload action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" size="60" name="plik">
     <input type="submit" value="Dodaj plik">
	     <input type="hidden" name="MAX_FILE_SIZE" value="1000000">
 </form>
 
 
 
 
 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>
 
<div id="message"></div>
 
 
<script>
$(document).ready(function()
{
 
	var options = { 
    beforeSend: function() 
    {
    	$("#progress").show();
    	//clear everything
    	$("#bar").width('0%');
    	$("#message").html("");
		$("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
    	$("#bar").width(percentComplete+'%');
    	$("#percent").html(percentComplete+'%');
 
 
    },
    success: function() 
    {
        $("#bar").width('100%');
    	$("#percent").html('100%');
 
    },
	complete: function(response) 
	{
		$("#message").html("<font color='green'>"+response.responseText+"</font>");
	},
	error: function()
	{
		$("#message").html("<font color='red'> BŁĄD: nie można przesyłać pliku</font>");
 
	}
 
}; 
 
     $("#myForm").ajaxForm(options);
 
});
 
</script>
</body>
 
 
</html>
[PHP] pobierz, plaintext

nospor

18.09.2013, 12:54:53

Przeciez na stronie pluginu masz przyklad z kilkoma plikami.
http://malsup.com/jquery/form/progress3.html

kubax33

18.09.2013, 13:22:43

dziękuje przydatne. Jednak jak chciałym, aby dla każdego input file był osobny pasek wgrywania... ?

nospor

18.09.2013, 13:29:53

No to chyba nie przy pomocy tego pluginu..... Widac, ze nie udostepnia takiej funkcjonalnosci

kubax33

18.09.2013, 13:39:54

co podobnego byś polecał?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.