सरल jQuery प्रगति बार प्रतिशत

मैं एक साधारण ट्यूटोरियल खोजने की कोशिश कर रहा हूं जो मेरी फ़ाइल अपलोड में प्रगति प्रतिशत जोड़ने के मूलभूत बातें दिखाता है, मैंने पहले ही अपना फ़ाइल अपलोड हिस्सा बनाया है, इसलिए मुझे एक प्लगइन नहीं चाहिए दोनों के साथ आता है, मैं प्रगति पट्टी को स्वयं कोड करने में सक्षम होना चाहता हूं, लेकिन मुझे यह करने के तरीके पर कुछ मदद चाहिए। मैं सीखना चाहता हूं कि यह कैसे काम करता है, मुझे बस कुछ प्लगइन नहीं चाहिए जो यह सब मेरे लिए करता है।सरल jQuery प्रगति बार प्रतिशत

किसी भी मदद की सराहना की जाएगी, धन्यवाद!

मुझे बस दिलचस्पी है कि फ़ाइल अपलोड का प्रतिशत कैसे प्राप्त करें, वास्तव में प्रगति पट्टी पर ही नहीं। मैं एक सटीक प्रतिशत प्राप्त करने में सक्षम होना चाहता हूँ।

स्रोत

2012-08-26 Dylan Cross

यहाँ देखो:

http://jquery.malsup.com/form/progress.html

इस प्रयास करें: -

यह मेरा html कोड

<!doctype html> 
<head> 
<title>File Upload Progress Demo #1</title> 
<style> 
body { padding: 30px } 
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px } 

.progress { position:relative; width:400px; 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> 
    <h1>File Upload Progress Demo #1</h1> 
    <code>&lt;input type="file" name="myfile"></code> 
     <form action="upload.php" method="post" enctype="multipart/form-data"> 
     <input type="file" name="uploadedfile"><br> 
     <input type="submit" value="Upload File to Server"> 
    </form> 

    <div class="progress"> 
     <div class="bar"></div > 
     <div class="percent">0%</div > 
    </div> 

    <div id="status"></div> 

<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); 
    }, 
    complete: function(xhr) { 
    bar.width("100%"); 
    percent.html("100%"); 
     status.html(xhr.responseText); 
    } 
}); 

})();  
</script> 

</body> 
</html>

मेरे php कोड है

<?php 
$target_path = "uploads/"; 

$target_path = $target_path . basename($_FILES['uploadedfile']['name']); 

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

स्रोत

2012-08-26 16:57:08

यह मेरा परीक्षण कोड है। प्रतिशत प्रगति पट्टी के साथ फ़ाइल अपलोड करें। कोशिश करो। –

SAVIOR। इस जवाब ने निरंतर संघर्ष के 3 दिनों के बाद मुझे बचाया। धन्यवाद बहुत भैजान अबीद। – trollster

@IliaRostovtsev, पोस्टिंग कोड के साथ-साथ लिंक का पूरा बिंदु, यदि लिंक अनुपलब्ध हो जाता है (अस्थायी रूप से या स्थायी रूप से) कोड इस साइट पर लोगों को देखने और उपयोग करने के लिए अभी भी उपलब्ध है। केवल उत्तरों के रूप में लिंक पोस्ट न करें, हमेशा कोड प्रदान करें। – TheCarver

कृपया एक नज़र डालें, मुझे लगता है कि आपको यह एक उपयोगी लगेगा। यह jQuery है और इसमें प्रगति प्रतिशत है, जैसा कि आप अपनी अपलोड स्क्रिप्ट के लिए चाहते थे!

Live Demo jsFiddle

आप अधिक जटिल उदाहरण जानने के लिए चाहते हैं, तो विश्वसनीय स्क्रिप्ट मैं सिफारिश करेंगे,
Uber Uploader कहा जाता है - यह jQuery और पीएचपी है।

स्रोत

2012-08-26 17:01:11

सरल jQuery प्रगति बार प्रतिशत

उत्तर

संबंधित मुद्दे