• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Uploader + progress bar

Status
Not open for further replies.
iDELTI

iDELTI

C++
Joined
Jan 15, 2010
Messages
2,033
Reaction score
69
Location
Zimbabwe
Witam!

Otóż szukam jakiegoś ciekawego uploadera z progress barem, mowa oczywiście o skrypcie, a nie serwisie.
Przeszukalem calego i znalazlem tylko Uber uploadera, ktory mi nie pasuje.
Macie jakies na skladzie moze?
​
 
pele112 said:
Może to ?
Html5 File Upload with Progress On Matlus
Click to expand...
To jest dobre, aczkolwiek potrzebuje czegos bardziej complicated.
Tj. wiekszego. Ten jest z deka okrojony.

Dobrze, zrobiłem coś takiego, całkiem ładnie wygląda:
Index of / - aczkolwiek mamy bledzik na stronie z .aspx'em -> sprobujcie cos zuploadowac.
Ma ktos jakies rozwiazanie i plik .php umozliwiajacy uploadowane pliki wrzucac do jakiegos tempa na serwer?

Upload.php
PHP: 
<!DOCTYPE html>

<html>

<head><title>

	File Upload using XMLHTTPRequest

</title>

    <style type="text/css">

		  body { font-family: Verdana, Arial, sans-serif; font-size: 90%;	}

		  h1, h2, h3, h4 { margin-top: 0px; }

		  div.row { margin-bottom: 10px; }

		  *:focus{ outline:none; }

		  .floatLeft { float: left; }

		  .floatRight { float: right; }

		  .clear { clear: both; }

		  

		  form {

		    padding: 20px;

		    border: 1px solid #cccccc;

		    border-radius:10px;

		    -moz-border-radius: 10px;

			  -webkit-box-shadow:0 0 10px #ccc;

			  -moz-box-shadow: 0 0 10px #ccc;

			  box-shadow: 0 0 10px #ccc;

		  

		    width: 400px;

		    margin: 20px auto;		  

			  background-image: -moz-linear-gradient(top, #ffffff,#f2f2f2);

			  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));			

		  }

		  

		  input {			

			  border:1px solid #ccc;

			  font-size: 13pt;			

			  padding: 5px 10px 5px 10px;			

			  border-radius:10px;

			  -moz-border-radius: 10px;			

			  -webkit-transition: all 0.5s ease-in-out;

	      -moz-transition: all 0.5s ease-in-out;

  			transition: all 0.5s ease-in-out;		

		  }

		  

		  input[type=button] {

		    background-image: -moz-linear-gradient(top, #ffffff, #dfdfdf);

	  		background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfdf));

		  }  				  



		  

		input:focus {

			-webkit-box-shadow:0 0 10px #ccc;

			-moz-box-shadow: 0 0 10px #ccc;

			box-shadow: 0 0 5px #ccc;

			

			-webkit-transform: scale(1.05);

			-moz-transform: scale(1.05);

			transform: scale(1.05);			

		}

		

		#fileToUpload { width: 378px; }

		

		#progressIndicator { font-size: 10pt; }

		

		#fileInfo 

		{

		  font-size: 10pt;

		  font-style: italic;

		  color: #aaa;

		  margin-top: 10px;

		}

		

		#progressBar 		

		{		  

		  height: 14px;

		  border: 1px solid #cccccc;

		  display: none;

			border-radius:10px;

		  -moz-border-radius: 10px;		  

			background-image: -moz-linear-gradient(top, #66cc00, #4b9500);

			background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));		  

		}

		

		#uploadResponse {

		  margin-top: 10px;

		  padding: 20px;

		  overflow: hidden;

		  display: none;

		  border-radius:10px;

		  -moz-border-radius: 10px;

		  border: 1px solid #ccc;		  

		  box-shadow: 0 0 5px #ccc;

			background-image: -moz-linear-gradient(top, #ff9900, #c77801);

			background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#c77801));		  

		}		  

    </style>

    

    <script type="text/javascript">

      var bytesUploaded = 0;

      var bytesTotal = 0;

      var previousBytesLoaded = 0;

      var intervalTimer = 0;



      function fileSelected() {

        var file = document.getElementById('fileToUpload').files[0];

        var fileSize = 0;

        if (file.size > 1024 * 1024)

          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';

        else

          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        document.getElementById('fileInfo').style.display = 'block';

        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;

        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;

        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;

      }

      

      function uploadFile() {

        previousBytesLoaded = 0;

        document.getElementById('uploadResponse').style.display = 'none';

        document.getElementById('progressNumber').innerHTML = '';

        var progressBar = document.getElementById('progressBar');

        progressBar.style.display = 'block';

        progressBar.style.width = '0px';        

        

        /* If you want to upload only a file along with arbitary data that

           is not in the form, use this */

        var fd = new FormData();

        fd.append("author", "Shiv Kumar");

        fd.append("name", "Html 5 File API/FormData");

        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);



        /* If you want to simply post the entire form, use this */

        //var fd = document.getElementById('form1').getFormData();

        

        var xhr = new XMLHttpRequest();        

        xhr.upload.addEventListener("progress", uploadProgress, false);

        xhr.addEventListener("load", uploadComplete, false);

        xhr.addEventListener("error", uploadFailed, false);

        xhr.addEventListener("abort", uploadCanceled, false);

        xhr.open("POST", "Upload.aspx");

        xhr.send(fd);



        intervalTimer = setInterval(updateTransferSpeed, 500);

      }



      function updateTransferSpeed() {

        var currentBytes = bytesUploaded;

        var bytesDiff = currentBytes - previousBytesLoaded;

        if (bytesDiff == 0) return;

        previousBytesLoaded = currentBytes;

        bytesDiff = bytesDiff * 2;

        var bytesRemaining = bytesTotal - previousBytesLoaded;

        var secondsRemaining = bytesRemaining / bytesDiff;



        var speed = "";

        if (bytesDiff > 1024 * 1024)

          speed = (Math.round(bytesDiff * 100/(1024*1024))/100).toString() + 'MBps';

        else if (bytesDiff > 1024)

          speed =  (Math.round(bytesDiff * 100/1024)/100).toString() + 'KBps';

        else

          speed = bytesDiff.toString() + 'Bps';

        document.getElementById('transferSpeedInfo').innerHTML = speed;

        document.getElementById('timeRemainingInfo').innerHTML = '| ' + secondsToString(secondsRemaining);        

      }



      function secondsToString(seconds) {        

        var h = Math.floor(seconds / 3600);

        var m = Math.floor(seconds % 3600 / 60);

        var s = Math.floor(seconds % 3600 % 60);

        return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);

      }



      function uploadProgress(evt) {

        if (evt.lengthComputable) {

          bytesUploaded = evt.loaded;

          bytesTotal = evt.total;

          var percentComplete = Math.round(evt.loaded * 100 / evt.total);

          var bytesTransfered = '';

          if (bytesUploaded > 1024*1024)

            bytesTransfered = (Math.round(bytesUploaded * 100/(1024*1024))/100).toString() + 'MB';

          else if (bytesUploaded > 1024)

            bytesTransfered = (Math.round(bytesUploaded * 100/1024)/100).toString() + 'KB';

          else

            bytesTransfered = (Math.round(bytesUploaded * 100)/100).toString() + 'Bytes';



          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';

          document.getElementById('progressBar').style.width = (percentComplete * 3.55).toString() + 'px';

          document.getElementById('transferBytesInfo').innerHTML = bytesTransfered;

          if (percentComplete == 100) {

            document.getElementById('progressInfo').style.display = 'none';

            var uploadResponse = document.getElementById('uploadResponse');

            uploadResponse.innerHTML = '<span style="font-size: 18pt; font-weight: bold;">Please wait...</span>';

            uploadResponse.style.display = 'block';

          }

        }

        else {

          document.getElementById('progressBar').innerHTML = 'unable to compute';

        }  

      }



      function uploadComplete(evt) {

        clearInterval(intervalTimer);

        var uploadResponse = document.getElementById('uploadResponse');

        uploadResponse.innerHTML = evt.target.responseText;

        uploadResponse.style.display = 'block';

      }  

  

      function uploadFailed(evt) {

        clearInterval(intervalTimer);

        alert("An error occurred while uploading the file.");  

      }  

  

      function uploadCanceled(evt) {

        clearInterval(intervalTimer);

        alert("The upload has been canceled by the user or the browser dropped the connection.");  

      }  



    </script>

</head>

<body>

<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">

  <div class="row">

    <label for="fileToUpload">Select a File to Upload</label><br />



    <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>  

  </div>

  <div class="row">

  <input type="button" onclick="uploadFile()" value="Upload" />

  </div>

  <div id="fileInfo">

    <div id="fileName"></div>

    <div id="fileSize"></div>

    <div id="fileType"></div>



  </div>

  <div class="row"></div>

  <div id="progressIndicator">

    <div id="progressBar" class="floatLeft">

    </div>

    <div id="progressNumber" class="floatRight">&nbsp;</div>

    <div class="clear"></div>

    <div>

      <div id="transferSpeedInfo" class="floatLeft" style="width: 80px;">&nbsp;</div>



      <div id="timeRemainingInfo" class="floatLeft" style="margin-left: 10px;">&nbsp;</div>

      <div id="transferBytesInfo" class="floatRight" style="text-align: right;">&nbsp;</div>

      <div class="clear"></div>

    </div>    

    <div id="uploadResponse"></div>

  </div>  

</form>



</body>

</html>

i teraz jak wygladaja moje pliki serwerowe.
Co zrobic, jak wgrac, jak zainstalowac?

H9Non.png


Blad:

Code: 
Not Found

The requested URL /Upload.aspx was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
 
Last edited by a moderator:
Jest moduł upload progress do nginxa, pozwalający uzyskać info w PHP na żywo o przesyłaniu pliku. W oparciu o to da się wyklepać wszystko.
 
ASPX to raczej aplikacje sieciowe pisanne w językach Microsoft, więc tutaj musisz mieć do tego Frameworka oraz IIS - aby to ruszyło w ogóle.​
 
Okej, mam all... Teraz do tego kodu musze dodac pasek postepu, jakies propy?
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
    <head>
        <title>SEBADW - UPLOADER</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
		
    </head>
    <body><center>
        <p><b><h1>|| SEBADW - UPLOADER ||</h1></b></p>
      
        <br />

        <form enctype="multipart/form-data" method="post" action="upload-file.php">
            <table class="uploadForm">
                <thead>
                    <tr>
                        <th colspan="3">Formularz uploadu pliku</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="catLeft">Wybierz plik:</td>
                        <td><input type="file" size="32" name="plik" value="" /></td>
                        <td class="comments">// Wybierz plik do uploadu</td>
                    </tr>

                    <tr>
                        <td class="catLeft">Katalog docelowy:</td>
                        <td><input type="text" name="dest_dir" value="uploaded/" /></td>
                        <td class="comments">// Wybierz katalog docelowy lub pozostaw domyślny</td>
                    </tr>
                    <tr>
                        <td class="catLeft">Prefix:</td>
                        <td><input type="text" name="file_prefix" /></td>
                        <td class="comments">// Wpisz prefix dla pliku, domyślnie brak prefixu</td>
                    </tr>
                    <tr>
                        <td class="catLeft">Nazwa pliku:</td>
                        <td><input type="text" name="file_name" /></td>
                        <td class="comments">// Wpisz nazwę dla pliku, domyślnie nazwa oryginalna (zabezpieczona)</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" name="Submit" value="Wyślij" /></td>
                        <td class="comments"></td>
                    </tr>
                </tbody>
            </table>
        </form>
		</center>
    </body>
</html>

Okej, zamknijcie temat.
Poradzilem sobie. Stworzylem sobie swoj php.ini, a progress bara z ajaxa.
Dziekuje, yo!

Podziekowania dla:
Ralcoral said:
ASPX to raczej aplikacje sieciowe pisanne w językach Microsoft, więc tutaj musisz mieć do tego Frameworka oraz IIS - aby to ruszyło w ogóle.​
Click to expand...

Dzieki za tego frameworka - glowilem sie dlaczego .aspx fucking shit nie dziala.
Musi byc bez tego, gdyz to ma byc public uploader, a nie kazdy ma frameworka + IIS... ;p
 
Last edited by a moderator:
Status
Not open for further replies.
Back
Top