Код за upload без презареждане

G

Galli

Registered
Трябва ми някакъв код за upload без да се презарежда страницата.
Но да е с PHP, а не с PERL или JAVA. Сигурно няма такъв, но може и да се бъркам?
Може и с Flash да е, но да е с PHP и да може да се добавя стил на полето и бутона с CSS, а не да се преработва fla файла. Пък ако показва и прогреса ще е супер.
Е ако някой е намерил такова нещо и иска да го сподели, благодаря предварително.
 
http://valums.com/ajax-upload/
Този е страхотен. С Javascript е и можеш да си го разбуташ както ти е удобно. Но няма прогресбар :lol:
http://appservnetwork.com/ajax/index.php Тук има няколко скрипта.
 
Мерси, ето такова ми трябва :arrow: http://www.sibsoft.net/upload_form_pro3.html
Аз намерих това ама не знам къде да му сложа php кода
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <title>AJAX Upload Progress & Cancel Upload</title>

    <script type="text/javascript">

        var file;

        function prepareUpload()

        {

            document.getElementById("fileSize").innerHTML = "";

            document.getElementById("bytesUploaded").innerHTML = "";

            document.getElementById("percentUploaded").innerHTML = "";

            document.getElementById("uploadProgressBar").style.width = "0%";

 

            // get file name

            file = document.getElementById("file").value;

            if(file.lastIndexOf("\\")>=0)

                file = file.substr(file.lastIndexOf("\\")+1);

            document.getElementById("fileName").innerHTML = file;

               

            // get folder path

            var curFolder = window.location.href;

            if(curFolder[curFolder.length-1]!="/")

                curFolder = curFolder.substring(0, curFolder.lastIndexOf("/")+1);

 

            document.getElementById("target").innerHTML = curFolder;

            document.getElementById("frm").action = curFolder;

        }

       

        var timerId;

        function formSubmit()

        {

            timerId = setInterval("updateProgress()", 1000);

            document.getElementById("cancelUploadBtn").disabled = false;

        }

       

        function updateProgress()

        {

            var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();

            var uploadTarget = document.getElementById("frm").action + file;

           

            request.open("REPORT", uploadTarget, false);

            request.send("<upload-progress xmlns='ithit'/>");

            var resp = request.responseText;

           

            // Extract number of bytes uploaded and total content length of the file.

            // Usually you will use XML DOM or regular expressions for this purposes

            // but here for the sake of simplicity we will just extract using string methods.

            var size;

            var sizeIndex = resp.indexOf("total-content-length");

            if(sizeIndex != -1)

            {

                size = resp.substring(resp.indexOf(">", sizeIndex)+1, resp.indexOf("</", sizeIndex));

                document.getElementById("fileSize").innerHTML = size;

            }

 

            var bytes = "Finished";

            var percent = 100;

            var bytesIndex = resp.indexOf("bytes-uploaded");

            if(bytesIndex != -1)

            {

                bytes = resp.substring(resp.indexOf(">", bytesIndex)+1, resp.indexOf("</", bytesIndex));

                if(parseInt(size)!=0)

                    percent = 100*parseInt(bytes)/parseInt(size);

            }

 

            document.getElementById("bytesUploaded").innerHTML = bytes;

            document.getElementById("percentUploaded").innerHTML = percent.toString().substr(0, 4) + " %";

            document.getElementById("uploadProgressBar").style.width = percent.toString() + "%";

           

            if(percent==100)

            {

                clearInterval(timerId);

                document.getElementById("cancelUploadBtn").disabled = true;

            }

        }

       

        function cancelUpload()

        {

            // recreate iframe to cancel upload

            document.getElementById("uploadFrameHolder").innerHTML = "<iframe name='uploadFrame' ></iframe>";

            clearInterval(timerId);

            document.getElementById("cancelUploadBtn").disabled = true;

        }

    </script>

  </head>

  <body>

    <span id="uploadFrameHolder" style="display:none"><iframe name="uploadFrame" ></iframe></span>

     

    <form id="frm" method="post" enctype="multipart/form-data" target="uploadFrame" onsubmit="formSubmit()">

        <input type="file" id="file" name="dummyname" onchange="prepareUpload()" /><br />

        <input type="submit" value="Upload" />

    </form>

    <table>

        <tr><td>File Name: </td><td id="fileName"></td></tr>

        <tr><td>Upload Target: </td><td id="target"></td></tr>

        <tr><td>File Size: </td><td id="fileSize"></td></tr>

        <tr><td>Bytes Uploaded: </td><td id="bytesUploaded"></td></tr>

        <tr>

            <td>Upload Progress: </td>

            <td>

                <table>

                    <tr>

                        <td>

                            <div style="width:200px; height:10px; border: solid 1px black; font-size:0px">

                                <div id="uploadProgressBar" style=" background-color: gray; height:100%; width:0%"></div>

                            </div>

                        </td>

                        <td id="percentUploaded"></td>

                    </tr>

                </table>

            </td>

        </tr>

    </table>

   

    <input id="cancelUploadBtn" disabled="true" type="button" value="Cancel" onclick="cancelUpload()" />

  </body>

</html>
 
Прегледах кода, видях от къде си го намерил и доколкото разбрах ще трябва да инсталираш допълнителен модул за да работи прогресбара :lol:

Този не е лош, но прогресбара е само за украшение. Ако няма да се качват големи файлове няма смисъл да се ползва скрипт с точен прогресбар, защото докато изпрати заявката до сървъра да провери колко е размера на качения файл, той бе бъде качен на 100% :?
Ако не ти трябва да е точен, по-добре да ползваш този http://valums.com/ajax-upload/ (ако ти трябва помощ с него, ще ти помогна :) ),
а ако ще качваш големи файлове можеш да ползваш swfupload.org :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе