PHP 및 jquery 진행률 표시 줄

나는 하나의 형식을 가지고 있고 입력 형식 파일을 가지고 있는데 그 형식을 사용하여 zip 파일을 업로드하고 압축 파일로 압축을 풀지 만 파일까지 로더를 보여주고 싶습니다 extract.How 어떻게 PHP 또는 jquery를 사용하여 할 수 있습니까?PHP 및 jquery 진행률 표시 줄

<form enctype="multipart/form-data" method="post" action="zip_upload.php"> 
<label>Upload Zip File: </label> <input type="file" name="zip_file"> 
<input type="submit" name="submit" value="Upload" class="upload" id="submitzip"> <br><br> 
</form>

출처

2013-12-12 Vishal

jQuery UI를 사용할 수 있습니다. 여기에서 확인할 수 있습니다 http://jqueryui.com/progressbar/#default

출처

2013-12-12 13:10:59 berzins92

% 진행률 막대를 표시하는 것은 까다로운 작업입니다. 이 주제에 대한 지식이 제한적이라면 적재 상태 또는 회전 아이콘을 표시하는 것이 훨씬 낫습니다.

가장 좋은 방법은 아니지만 과거에는 나와 다른 많은 사람들에게 놀라운 일을 해왔습니다.

CSS :

#uploadFrame { 
    height:1px; 
    width:1px; 
    visibility:hidden; 
}

HTML :

// hide this on your page somewhere. It's only 1x1 pixels, so should be simple. 
<iframe src="zip_upload.php" name="uploadFrame" id="uploadFrame"></iframe> 

// your upload form 
<form enctype="multipart/form-data" method="post" action="zip_upload.php" target="uploadFrame"> 
    // form content 
</form>

jQuery를 :

$(form).submit(function() { 
    $('#loading-spinner').show(); 
}); 

$("#uploadFrame").load(function() { 
    $('#loading-spinner').hide(); 
});

양식이 제출하는 로드 아이콘이 표시되고 업로드 및 추출 프로세스가 완료되면 (iFrame로드 됨)로드 아이콘이 사라집니다. 이 모든 것은 페이지를 다시로드하지 않고 발생합니다.

약간의 수정 (jQuery를 Javascript로 변환)하면 보너스로 사용하기 위해 외부 라이브러리 나 플러그인이 필요하지 않습니다. 또한 매우 간단하고 이해하기 쉽습니다.

다른 옵션 ------------------------------------------- -

jQuery 라이브러리 &이 조금 더 고급이며 포함되지만 백분율 기능이 있습니다.

설명서 및 전체 사양은 여기, 데모는 http://malsup.com/jquery/form/progress.html을 확인하십시오.

<form action="zip-upload.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="zip_file"> 
    <input type="submit" value="Upload"> 
</form> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
(function() { 

var bar = $('.bar'); 
var percent = $('.percent'); 
var status = $('#status'); 

$('form').ajaxForm({ 
    beforeSend: function() { 
     status.empty(); 
     var percentVal = '0%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    uploadProgress: function(event, position, total, percentComplete) { 
     var percentVal = percentComplete + '%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    success: function() { 
     var percentVal = '100%'; 
     bar.width(percentVal) 
     percent.html(percentVal); 
    }, 
    complete: function(xhr) { 
     status.html(xhr.responseText); 
    } 
}); 

})();  
</script>

그리고 당신의 PHP 페이지 :

<?php 
$target_path = "uploads/"; 
$target_path = $target_path . basename($_FILES['zip_file']['name']); 
if(move_uploaded_file($_FILES['zip_file']['tmp_name'], $target_path)) { 
    echo "The file ". basename($_FILES['zip_file']['name']). 
    " has been uploaded"; 
} else{ 
    echo "There was an error uploading the file, please try again!"; 
} 
?>

코드입니다

출처

2013-12-12 13:29:57 TheCarver

PHP 및 jquery 진행률 표시 줄

답변

관련 문제